ActionChip 标签上出现意外的灰色下划线答案

【问题标题】：Unexpected gray underline on ActionChip labelActionChip 标签上出现意外的灰色下划线
【发布时间】：2021-12-01 03:42:54
【问题描述】：

在我的一个动作芯片上，标签上出现了这条灰色下划线。仅供参考，这是 Flutter Web，它似乎只发生在 Chrome Android 上，从不在 iOS Safari 或桌面 Chrome 上。

动作芯片充当过滤器按钮，单击该按钮后，您可以选择不同的值。只有某些值才会显示此下划线。我熟悉颤动的黄色下划线错误，但这种灰色对我来说是新的。

ActionChip(
    label: Text(_label(),
        style: Theme.of(context).textTheme.bodyText2.copyWith(
            color: (_hasSelectedFilters())
                ? AppTheme.filterText
                : AppTheme.highEmphasis)),
    backgroundColor: Colors.transparent,
    side: BorderSide(
        color: (_hasSelectedFilters())
            ? AppTheme.highEmphasis
            : AppTheme.mediumEmphasis,
        width: 1.0),
    labelPadding: EdgeInsets.only(left: 8.0, right: 8.0),
    onPressed: _showFilters,
)

String _label() {
  if (!_hasSelectedFilters()) {
    return "Material type";
  } else if (widget.controller.selectedFilters.length == 1) {
    return _filters
      .firstWhere((element) =>
          element.value.code == widget.controller.selectedFilters.first)
      .label;
  } else {
    return "${widget.controller.selectedFilters.length} materials";
  }
}

更新：我能够通过将 Text 小部件更改为 RichText 小部件来解决它。但是，它解决了它很奇怪，因为 Text 小部件是 RichText 的包装器。

【问题讨论】：

标签： flutter google-chrome flutter-web google-chrome-android

【解决方案1】：

Web Renderer 是 Flutter 中使用的默认选项 - 它通过绝对定位的 HTML 元素模拟 Skia，因此容易出现旧的跨浏览器显示问题。您可以尝试切换到 CanvasKit 渲染器，它是基于 WASM 的完整 Skia 实现，可确保 UI 与原生平台的像素完美匹配。

通过终端运行：flutter run -d chrome --web-renderer canvaskit

建筑：flutter build web --web-renderer canvaskit

如果你使用 VSCode，你可以为 CanvasKit 添加一个单独的配置到 launch.json 例如：

{
  "name": "Release CanvasKit",
  "request": "launch",
  "type": "dart",
  "flutterMode" : "release",
  "program" : "lib/main.dart",
  "args": [
    "--web-renderer", "canvaskit"
  ],
}

完整示例：https://github.com/maxim-saplin/flutter_web_spa_sample/blob/main/.vscode/launch.json

更多关于 Flutter Web 渲染器的信息：https://flutter.dev/docs/development/tools/web-renderers

【讨论】：

【解决方案2】：

Flutter web 使用什么渲染器？
我怀疑它可能是水平溢出引起的，它是滚动条。
请使用 Flutter 开发者工具检查树：小部件树和渲染对象树。你可以直接看到是哪个小部件在画这条奇怪的灰线。如果你找到了但还是看不懂，请截图并更新问题。
I was able to resolve it by changing the Text widget to a RichText widget.Text 与 RichText 有一些不同的默认值，所以这并不是什么很奇怪的事情。这也可以是找出bug原因的一种方法：你可以从一个普通的RichText开始，逐步给RichText一些与Text通常会做的相同的参数，最后你会看到一个参数导致了问题.

【讨论】：