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

Question

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

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

关于为什么会发生这种情况有什么想法吗？

Answer 1

问题是 Scaffold 与否。 Scaffold 是 Material 应用程序（AppBar、Drawer 之类的助手）。但是你不是被迫使用 Material.

您缺少的是 DefaultTextStyle 作为 parent:

的实例

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

Scaffold, Dialog, AppBar, ListTile, ...

各种widget加一个改变默认的文本主题

例如，DefaultTextStyle 允许您的 app-bar 标题默认为粗体。

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时的黄色文本问题：

如所述，当在两侧使用 Hero 时，您可以将 child 包裹在 Material 中。例如：

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

Answer 4

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

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

Answer 5

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

Answer 6

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

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

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

Answer 7

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

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

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

希望对大家有所帮助。

Answer 8

对此还有其他解决方案，尤其是当您使用 main.dart 文件中包含的多个页面时。您可以这样做：

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

这将删除包装纸下任何页面 referenced/used 中文本下方的黄线。

Answer 9

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

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

Answer 10

在我们 MaterialApp 的 builder 下添加 DefaultTextStyle 像这样：

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

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

Answer 11

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

解决方案：把它包起来！

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

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

Answer 12

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

MaterialApp uses this TextStyle as its DefaultTextStyle to encourage developers to be intentional about their DefaultTextStyle.

In Material Design, most Text widgets are contained in Material widgets, which sets a specific DefaultTextStyle. If you're seeing text that uses this text style, consider putting your text in a Material widget (or another widget that sets a DefaultTextStyle).

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

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

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

Answer 13

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

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

或者只是包装到Scaffold中，Scaffold是一个widget。提供脚手架对于您应用中的页面。像这样

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

有关更多信息，请浏览此 Flutter 官方视频。

Yellow underline text | Decoding Flutter

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 or Live code

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')),
    ),
  ),
);

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

Yellow lines under Text Widgets in Flutter?

dart

flutter

flutter-layout

使用`Material`（简单更好）：

设置`Text.style`属性:

提供`Scaffold`:

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

Yellow lines under Text Widgets in Flutter?

dart

flutter

flutter-layout

使用Material（简单更好）：

设置Text.style属性:

提供Scaffold:

使用`Material`（简单更好）：

设置`Text.style`属性:

提供`Scaffold`: