flutter - ActionChip 标签上意外的灰色下划线

Question

在我的一个 Action 芯片上，我在标签上看到这条灰色下划线。仅供引用，这是 Flutter Web，它似乎只发生在 Chrome Android 上，从未发生在 iOS Safari 或桌面版 Chrome 上。

操作卡用作筛选器按钮，单击该按钮后您可以选择不同的值。它仅针对某些值显示此下划线。我很熟悉 flutter 的黄色下划线错误，但这个灰色对我来说是新的。

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 的包装器。

Answer 1

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

通过终端运行: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