返回

Flutter Text 文字下方出现黄色双下划线时应该如何解决?

Android

在 Flutter 中,Text 组件是用于显示文本的组件,它属于 Material 风格组件库。这意味着它遵循 Material Design 设计规范,并具有 Material 风格的默认样式。Material 风格是一种由 Google 开发的设计语言,强调简单、精致和易用。在 Flutter 中,默认的根组件(如 MaterialApp 或 CupertinoApp)都会自动提供 Material 风格的主题(Theme)。

如果我们的应用程序没有明确设置主题,那么 Text 组件就会使用默认主题的样式。而默认主题中,Text 组件的默认样式可能会在文本下方显示黄色双下划线。这是因为 Material 风格的文本通常都会有下划线作为链接的视觉提示。

当我们的应用程序不需要这些下划线时,我们可以通过修改根组件的主题来消除它们。要做到这一点,我们需要在 MaterialApp 或 CupertinoApp 组件中设置 theme 属性。theme 属性的值是一个 ThemeData 对象,它包含了主题的各种属性,包括文本样式。

以下代码演示如何修改根组件的主题以消除 Text 组件下方的黄色双下划线:

MaterialApp(
  theme: ThemeData(
    textTheme: TextTheme(
      bodyText2: TextStyle(decoration: TextDecoration.none),
    ),
  ),
  home: Scaffold(
    appBar: AppBar(
      title: Text('Flutter Text'),
    ),
    body: Center(
      child: Text('Hello, World!'),
    ),
  ),
);

通过将 bodyText2 文本样式的 decoration 属性设置为 TextDecoration.none,我们就可以消除 Text 组件下方的黄色双下划线。

除了修改根组件的主题之外,我们还可以直接修改 Text 组件的样式来消除黄色双下划线。以下代码演示如何直接修改 Text 组件的样式:

Text(
  'Hello, World!',
  style: TextStyle(decoration: TextDecoration.none),
);

通过将 style 属性设置为 TextStyle 对象,并将其 decoration 属性设置为 TextDecoration.none,我们也可以消除 Text 组件下方的黄色双下划线。

在实际开发中,我们可以根据需要选择上述两种方法之一来消除 Text 组件下方的黄色双下划线。如果我们需要全局地消除所有 Text 组件的黄色双下划线,那么我们可以修改根组件的主题。如果我们只需要消除特定 Text 组件的黄色双下划线,那么我们可以直接修改该 Text 组件的样式。