【问题标题】:Yellow lines under Text Widgets in Flutter?Flutter中文本小部件下的黄线?
【发布时间】:2018-04-17 07:11:07
【问题描述】:

正在开发我的第一个颤振应用程序。主应用屏幕没有这个问题,所有文本都按原样显示。

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

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

【问题讨论】:

  • 你能添加你的代码吗?
  • 我怀疑原因是因为您在此页面上没有脚手架。
  • 每个页面都需要一个 Scaffold,即使您将较小的小部件重构到单独的类中,它们最终也应该在某个地方有一个 Scaffold 父级。我不确定这是否意味着要为文本加下划线或者这是一个问题,无论如何,您最终都需要在 Scaffold 中构建任何页面。
  • 或者如果你不想要Scaffold,你可以用Material小部件包围你的Text
  • 这是否记录在某处?由于我是 Flutter 的新手,我无法弄清楚为什么我的文本会出现双下划线 默认情况下

标签: flutter dart underline flutter-widget text-widget


【解决方案1】:

问题在于是否有ScaffoldScaffoldMaterial 应用程序的助手(AppBarDrawer 之类的东西)。但你不必使用Material

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

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

有很多方法可以引入 Theme 实例。在 Material App 中,这通常是通过实例化一个Material Widget 来实现的。 你猜怎么着? Scaffold 为您创建一个。不过Dialog也是!

【讨论】:

  • 还请记住,对于英雄,它在“飞行”时与父级断开连接,因此添加一个 Material(或任何主题)作为英雄的子级(双方)将其修复在过渡。见github.com/flutter/flutter/issues/30647
  • @Rémi 如果您说父项中缺少主题实例,为什么将主题放在顶部而不是材质或脚手架无助于解决问题?我只是试试看。
  • 只是一个更新,缺少的是 DefaultTextStyle,而不是 Theme。
  • 我刚刚在下面的答案中添加了另一种解决此问题的方法。
  • 添加主题父级并不能解决问题。 DefaultTextStyle 是缺少的父级,根据 documentation
【解决方案2】:

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

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

【讨论】:

  • Material 围绕textwidget 小部件帮助了我。在我的情况下,将 Material 添加为根元素没有帮助
  • type: MaterialType.transparency 一起工作或不与任何人一起工作。
  • 感谢您指出type: MaterialType.transparency,。需要它,因为我的孩子有圆形边框,所以我看到的是白色背景。
【解决方案3】:

您需要做的就是提供一个Material 小部件,或在内部覆盖此小部件的Scaffold

  • 使用 Scaffold:

    Scaffold(body: Text('Hi'))
    
  • 使用 Material:

    Material(child: Text('Hi'))
    
  • 设置style属性:

    Text(
      'Your text',
      style: TextStyle(decoration: TextDecoration.none), // removes yellow line
    )
    

【讨论】:

  • 这个解决方法帮助我修复了英雄动画中的黄线。谢谢。
【解决方案4】:

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

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

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

【讨论】:

    【解决方案5】:

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

    【讨论】:

      【解决方案6】:

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

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

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

      希望对某人有所帮助。

      【讨论】:

        【解决方案7】:

        在您的Text Widget 中,使用style 属性并将decoration 设置为null,如图所示:

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

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

        【讨论】:

          【解决方案8】:

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

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

          【讨论】:

            【解决方案9】:

            有两种方式可供选择:

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

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

            为小部件的父级使用材质

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

            【讨论】:

            • 创建新小部件时是否总是需要第二个?
            • @lolelo 是的,如果您不使用脚手架(第一个)作为 body 标签父级,则总是需要第二个
            【解决方案10】:

            对此还有另一种解决方案,特别是如果您使用包装在 ma​​in.dart 文件下的多个页面您可以执行以下操作:

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

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

            【讨论】:

              【解决方案11】:

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

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

              【讨论】:

                【解决方案12】:

                问题:您的小部件没有默认文本样式,

                解决方案:把它包起来!

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

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

                【讨论】:

                  【解决方案13】:

                  黄线来自_errorTextStyle。文档声明您应该定义一个 DefaultTextStyle 父级(或使用 Material,它会为您执行此操作):

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

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

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

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

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

                  【讨论】:

                    【解决方案14】:

                    在我们的MaterialAppbuilder 下添加DefaultTextStyle,如下所示:

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

                    通过这样做,我们不需要在每次使用showDialogOverlay 时都指定styleDefaultTextTheme

                    【讨论】:

                      猜你喜欢
                      • 2021-04-17
                      • 2022-11-30
                      • 2020-12-11
                      • 2020-08-18
                      • 2019-11-05
                      • 2011-04-08
                      • 2023-03-07
                      • 2020-02-07
                      • 2021-03-24
                      相关资源
                      最近更新 更多