Flutter中的文本小部件下的黄线？


Yellow lines under Text Widgets in Flutter?

正在开发我的第一个Flutter应用。应用主屏幕上没有此问题，所有文本均应显示。

但是，在我正在开发的新屏幕中，所有文本小部件的下方都有一些奇怪的黄线/双线。

为什么会这样？

Yellow

相关讨论

问题是否存在Scaffold。
Scaffold是Material应用程序(AppBar，Drawer之类的东西)的助手。但是您不必强制使用Material。

您所缺少的是作为父级的Theme实例。

为什么这么重要要知道？因为当您开发模态(例如，使用showDialog)时，您将面临相同的问题。
但是Scaffold是不透明的全屏小部件！而且您显然不希望在您的模态中使用它。

有很多方法可以引入主题实例。在Material App中，这通常是通过实例化Material小部件来实现的。
你猜怎么着？ Scaffold为您创建一个。但是Dialog也是如此！

相关讨论

添加Material小部件作为根元素。

1
2
3
4
5
@override
  Widget build(BuildContext context) {
    return Material(
        type: MaterialType.transparency,
        child: new Container(

相关讨论

您可以使用Scaffold(通常更好)，也可以使用其他提供实质性主题的组件，例如简单的Material小部件。

这里是示例，使用其中任何一个：

1
2
var text = Scaffold(body: Text("Hi"),);
var text2 = Material(child: Text("Hi"),);

作为解决方法，您可以使用：

1
2
3
4
Text(
  'Your text',
  style: TextStyle(decoration: TextDecoration.none), // removes yellow line
)
相关讨论

文本样式具有修饰参数，可以将其设置为none

1
2
3
4
5
Text("My Text",
  style: TextStyle(
    decoration: TextDecoration.none,
  )
);

此外，正如其他人提到的那样，如果您的"文本"小部件位于"脚手架"或"材料"小部件的树中，则不需要装饰文本样式。

也可以使用修饰：TextDecoration.none删除下划线

只需在这些答案中添加我遇到的另一种方式。

将根Widget包裹在DefaultTextStyle Widget周围。此处不必更改每个"文本"小部件。

1
2
3
4
DefaultTextStyle(
    style: TextStyle(decoration: TextDecoration.none),
    child : Your_RootWidget
)

希望对别人有帮助。

在您的Text Widget内，使用style属性，并将decoration设置为null，如下所示：

1
2
3
4
5
6
Text(
  "hello world",
   style: TextStyle(
       decoration: TextDecoration.none
   ),
)

这将删除文本下方的黄线。

您应该在main.dart文件中添加Material和Scaffold小部件。

1
2
3
4
5
 MaterialApp(
  home: Scaffold(
    body: Text('Hello world'),
  ),
);

有2种方法可用：

在屏幕的父级中使用脚手架

1
Scaffold(body: Container(child:Text("My Text")))

将材料用作小部件的父级

1
Material(child: Text("My Text"))

您只需要添加Material根小部件。

1
2
3
4
5
6
      @override
       Widget build(BuildContext context) {
      return Material(
         child: new Container(),
        );
       }

还有另一种解决方案，尤其是当您使用包裹在main.dart文件下的多个页面时，您可以执行以下操作：

1
2
3
  child: MaterialApp(
    home: Material(child: Wrapper()),
  ),

这将删除在package器下引用/使用的任何页面中存在的文本下的黄线。

问题：您的小部件没有默认的文字样式，

解决方案：将它package成一个！

1
2
3
4
DefaultTextStyle(
    style: TextStyle(),
    child: yourWidget,
  );

请记住，如果您未设置任何颜色，则默认文本颜色为白色！

在MaterialApp的builder下添加DefaultTextStyle，如下所示：

1
2
3
4
5
6
7
8
9
child: MaterialApp(      
  ...
  ...
  theme: yourThemeData,
  builder: (context, child) => DefaultTextStyle(
    style: yourThemeData.textTheme.bodyText1,
    child: child,
  ),
),

这样做，我们不需要每次都要使用showDialog或Overlay时都指定style或使用DefaultTextTheme。