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

Question

主应用程序屏幕没有此问题，所有文本均按应有的方式显示。

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

关于为什么会发生这种情况的任何想法？

Answer 1

问题是有没有Scaffold 。 Scaffold是Material应用程序（ AppBar 、 Drawer之类的）的助手。 但是您不必被迫使用Material 。

您缺少的是作为父级的DefaultTextStyle实例：

DefaultTextStyle(
  style: TextStyle(...),
  child: Text('Hello world'),
)

各种小部件添加一个以更改默认文本主题，例如 Scaffold、Dialog、AppBar、ListTile、...

例如，它是DefaultTextStyle ，它允许您的应用栏标题默认为粗体。

Answer 2

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

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

Answer 3

您需要做的就是提供一个Material小部件，或者一个内部覆盖该小部件的Scaffold 。 您可以通过以下方式做到这一点：

• 使用Material （简单且更好）：

   Material( color: Colors.transparent, // <-- Add this, if needed child: Text('Hello'), )

• 设置Text.style属性：

   Text( 'Hello', style: TextStyle(decoration: TextDecoration.none), // Set this )

• 提供Scaffold ：

   Scaffold(body: Text('Hello'))

---

修复使用Hero时的黄色文本问题：

正如aaronvargas 所提到的，您可以在两侧使用Hero时将您的child包裹在Material中。 例如：

Hero(
  tag: 'fooTag',
  child: Material( // <--- Provide Material
    type: MaterialType.transparency,
    child: YourWidget(),
  ),
);

Answer 4

文本样式有一个可以设置为无的装饰参数

Text("My Text",
  style: TextStyle(
    decoration: TextDecoration.none,
  )
);

此外，正如其他人所提到的，如果您的 Text 小部件位于 Scaffold 或 Material 小部件的树中，则您不需要装饰文本样式。

Answer 5

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

Answer 6

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

将根 Widget 包裹在DefaultTextStyle小部件周围。 在这里更改每个 Text 小部件不是必需的。

DefaultTextStyle(
    style: TextStyle(decoration: TextDecoration.none), 
    child : Your_RootWidget
)

希望它可以帮助某人。

Answer 7

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

Text( 
   "hello world",
   style: TextStyle(
       decoration: TextDecoration.none
   ),
)

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

Answer 8

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

 MaterialApp(
  home: Scaffold(
    body: Text('Hello world'),
  ),
);

Answer 9

2种方式可用：

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

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

使用材质作为小部件的父级

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

Answer 10

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

      @override
       Widget build(BuildContext context) {
      return Material(
         child: new Container(),
        );
       }

Answer 11

对此还有其他解决方案，特别是如果您使用包含在main.dart文件下的多个页面，您可以执行以下操作：

  child: MaterialApp(
    home: Material(child: Wrapper()),
  ),

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

Answer 12

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

解决方案：把它包在一个！

DefaultTextStyle(
    style: TextStyle(),
    child: yourWidget,
  );

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

Answer 13

黄线来自_errorTextStyle 。 文档说明您应该定义一个DefaultTextStyle父级（或使用Material ，它会为您执行此操作）：

MaterialApp 使用这个 TextStyle 作为它的 DefaultTextStyle 来鼓励开发者注意他们的 DefaultTextStyle。

在 Material Design 中，大多数 Text 小部件都包含在 Material 小部件中，它设置了特定的 DefaultTextStyle。 如果您看到使用此文本样式的文本，请考虑将您的文本放入 Material 小部件（或另一个设置 DefaultTextStyle 的小部件）中。

大多数人不会在没有材料的情况下开发 Flutter 应用程序，但如果这是你的用例，你应该使用DefaultTextStyle 。

与接受的答案相反， Theme没有设置DefaultTextStyle ，因此它不能解决您的问题。 Scaffold确实解决了这个问题，因为它包含Material ，它又定义了DefaultTextStyle ，但是Scaffold比你需要的Dialog 、 Hero等要多一点。

要为您的整个应用永久解决此问题，您可以在MaterialApp builder中设置DefaultTextStyle 。 这解决了应用程序所有组件的问题，而不仅仅是您正在处理的当前屏幕。

Answer 14

前

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Center(
          child: Text(
            "21:34",
            style: TextStyle(fontSize: 50),
          ),
        ),
        Center(
          child: Text(
            "Wakey - wakey",
            style: TextStyle(fontSize: 20),
          ),
        )
      ],
    );
  }

之后（解决方案）：

这里用Scaffold小部件包裹当前顶部或父小部件

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: Text(
              "21:34",
              style: TextStyle(fontSize: 50),
            ),
          ),
          Center(
            child: Text(
              "Wakey - wakey",
              style: TextStyle(fontSize: 20),
            ),
          )
        ],
      ),
    );
  }

完整代码： Dartpad 或 Live 代码

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: sta()));

class sta extends StatefulWidget {
  const sta({Key? key}) : super(key: key);

  @override
  State<sta> createState() => _staState();
}

var isShow = false;


class _staState extends State<sta> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: Text(
              "21:34",
              style: TextStyle(fontSize: 50),
            ),
          ),
          Center(
            child: Text(
              "Wakey - wakey",
              style: TextStyle(fontSize: 20),
            ),
          )
        ],
      ),
    );
  }
}

Answer 15

您还可以将脚手架作为 MaterialApp 的家。 这对我有用。

return MaterialApp(
  home: Scaffold(
    body: Container(
      child: SingleChildScrollView(child: Text('Test')),
    ),
  ),
);

Answer 16

我推荐这种方法，因为你可以这样做一次，它会覆盖你的整个应用程序。

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

child: MaterialApp(      
  ...
  ...
  theme: yourThemeData,
  builder: (context, child) => DefaultTextStyle(
    style: yourThemeData.textTheme.bodyText1,
    child: child,
  ),
),

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

Answer 17

该文本具有隐藏的默认文本样式。出现问题是因为您无法将其提供给任何父小部件，例如Scaffold 。 文本小部件采用默认样式。 对于您的解决方案，您可以像这样更改DefaultTextStyle 。

DefaultTextStyle(
    style: TextStyle(),
    child: yourTextWidget,
  );

或者只是包装成 Scaffold，Scaffold 是一个小部件。 为您的应用程序中的页面提供脚手架。 像这样

 MaterialApp(
  home: Scaffold(
    body: Text('Wakey Wakey!'),
  ),
);

欲了解更多信息，请浏览这个 Flutter 官方视频。

黄色下划线文字 | 解码颤振

Answer 18

使用 DefaultTextStyle() 小部件来设置文本的文本样式。

DefaultTextStyle(
  style: kTempTextStyle,
  child: Text('Hello world'),
)

您可以根据需要提供自己的文本样式。

const kTempTextStyle = TextStyle(
  fontFamily: 'Spartan MB',
  fontSize: 100.0,
  decoration: null,
);