當(dāng)InkerWell組件內(nèi)部獲取到焦點(diǎn)時(shí)，會(huì)展示一層灰色遮罩

將focusColor屬性設(shè)置為透明即可

Flutter InkWell焦點(diǎn)效果源碼分析

問(wèn)題描述

當(dāng) InkWell 組件獲得焦點(diǎn)時(shí)，會(huì)顯示一層灰色遮罩效果。需要找出這個(gè)效果是由哪些組件控制的，以及具體的實(shí)現(xiàn)機(jī)制。

排查思路

1. 從InkWell組件入手

首先查看 InkWell 類的定義：

class InkWell extends InkResponse {const InkWell({Key? key,Widget? child,Color? focusColor,// ...更多屬性})

發(fā)現(xiàn)：

• InkWell 繼承自 InkResponse
• 有 focusColor 屬性可以控制焦點(diǎn)顏色

2. 追蹤InkResponse實(shí)現(xiàn)

在 InkResponse 中找到焦點(diǎn)相關(guān)的重要方法：

void handleFocusUpdate(bool hasFocus) {_hasFocus = hasFocus;statesController.update(MaterialState.focused, hasFocus);updateFocusHighlights();widget.onFocusChange?.call(hasFocus);
}

關(guān)鍵發(fā)現(xiàn)：

• 焦點(diǎn)狀態(tài)變化時(shí)會(huì)調(diào)用 updateFocusHighlights()
• 使用 statesController 管理狀態(tài)

3. 分析高亮實(shí)現(xiàn)

找到 updateHighlight 方法：

void updateHighlight(_HighlightType type, { required bool value }) {final InkHighlight? highlight = _highlights[type];if (value) {if (highlight == null) {_highlights[type] = InkHighlight(controller: Material.of(context)!,referenceBox: referenceBox,color: getHighlightColorForType(type),shape: widget.highlightShape,// ...);}}
}

重要發(fā)現(xiàn)：

• 使用 InkHighlight 類來(lái)實(shí)現(xiàn)高亮效果
• 高亮效果存儲(chǔ)在 _highlights Map 中
• 通過(guò) Material.of(context) 獲取控制器

4. 追蹤顏色獲取邏輯

在 getHighlightColorForType 方法中：

Color getHighlightColorForType(_HighlightType type) {final ThemeData theme = Theme.of(context);switch (type) {case _HighlightType.focus:return widget.focusColor ?? theme.focusColor;// ...}
}

了解到：

• 焦點(diǎn)顏色優(yōu)先使用 widget.focusColor
• 如果未指定則使用主題中的 focusColor

5. 分析Material實(shí)現(xiàn)

Material 組件的作用：

• 創(chuàng)建 _RenderInkFeatures 來(lái)管理 ink 效果
• 提供 MaterialInkController 接口
• 處理實(shí)際的繪制邏輯

class _RenderInkFeatures extends RenderProxyBox implements MaterialInkController {void addInkFeature(InkFeature feature) {_inkFeatures ??= <InkFeature>[];_inkFeatures!.add(feature);markNeedsPaint();}void paint(PaintingContext context, Offset offset) {if (_inkFeatures != null && _inkFeatures!.isNotEmpty) {final Canvas canvas = context.canvas;// 繪制所有ink特效for (final InkFeature inkFeature in _inkFeatures!) {inkFeature._paint(canvas);}}}
}

實(shí)現(xiàn)流程總結(jié)

1. 觸發(fā)焦點(diǎn)：

   • Focus widget 檢測(cè)到焦點(diǎn)變化
   • 調(diào)用 handleFocusUpdate

2. 創(chuàng)建高亮：

   • updateFocusHighlights 判斷是否需要顯示焦點(diǎn)
   • updateHighlight 創(chuàng)建 InkHighlight 實(shí)例

3. 設(shè)置顏色：

   • getHighlightColorForType 獲取焦點(diǎn)顏色
   • 優(yōu)先使用 focusColor 屬性，否則使用主題顏色

4. 渲染過(guò)程：

   • InkHighlight 被添加到 Material 的 _inkFeatures
   • _RenderInkFeatures 在繪制時(shí)遍歷所有特效
   • 通過(guò) Canvas API 實(shí)現(xiàn)最終的視覺(jué)效果

修改建議

如果需要自定義焦點(diǎn)效果，可以：

1. 設(shè)置 InkWell 的 focusColor 屬性
2. 在 ThemeData 中配置全局 focusColor
3. 使用 MaterialState 配置更復(fù)雜的狀態(tài)樣式

相關(guān)類和文件

• InkWell
• InkResponse
• InkHighlight
• Material
• MaterialInkController
• _RenderInkFeatures

參考

• Flutter SDK Material 源碼
• Flutter 文檔中的 InkWell 部分