颤振中的文本部件下的黄线?

主应用程序屏幕没有这个问题，所有的文本显示他们应该。

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

你知道为什么会这样吗?

Yellow Lines

109656 次浏览
小开
最佳答案
问题是是否有Scaffold。 Scaffold是Material应用程序(AppBar， Drawer之类的东西)的助手。但是你不会被迫使用Material.

你缺少的是DefaultTextStyle作为父对象的实例:

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

各种小部件添加一个来更改默认的文本主题，如脚手架，对话框，AppBar, ListTile，…

例如，它是DefaultTextStyle，允许你的应用程序栏标题在默认情况下加粗。

小开

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

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

你所需要做的就是提供一个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
)
  • < h4 >提供Scaffold: 
    Scaffold(body: Text('Hello'))

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

正如aaronvargas所提到的，当在两边使用Hero时，可以将child包装在Material中。例如:

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

你应该在main中添加Material和Scaffold部件。飞镖文件

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

你也可以使用装饰:TextDecoration。无删除下划线

小开

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

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

另外，正如其他人提到的，如果你的文本小部件在脚手架或材料小部件的树中，你就不需要装饰文本样式了。

小开

只是给这些答案加上了另一种方式。

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

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

希望它能帮助到别人。

小开

有一个其他的解决方案，特别是如果你使用main.dart文件包装多个页面。你可以这样做:

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

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

小开

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

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

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

将DefaultTextStyle添加到MaterialApp的builder下面，如下所示:

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

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

小开

问题:你的小部件没有默认文本样式，

解决方案:把它包在一个!

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

记住，如果你不设置任何颜色，默认文本颜色是白色!

小开

黄线来自_errorTextStyle。文档声明你应该定义一个DefaultTextStyle父对象(或者使用Material，它可以帮你完成这个任务):

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

在材质设计中，大多数文本小部件都包含在材质小部件中，这设置了一个特定的DefaultTextStyle。如果您看到使用这种文本样式的文本，请考虑将文本放在Material小部件(或另一个设置DefaultTextStyle的小部件)中。

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

与公认的答案相反，Theme没有设置DefaultTextStyle，所以它不能解决你的问题。Scaffold确实解决了这个问题，因为它包含Material，它反过来定义了DefaultTextStyle，但是Scaffold比你需要的Dialog、Hero等要多一些。

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

小开

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

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

或者直接包装到Scaffold中，Scaffold是一个小部件。它提供了脚手架 用于应用程序中的页面。 这样的< / p > 

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

要了解更多信息，请浏览这个颤振官方视频。

黄色下划线文本|解码颤扑

小开

之前

enter image description here

  @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小部件包装当前顶部或父小部件

enter image description here

  @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),
),
)
],
),
);
}

完整的代码:飞镖或实时代码

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),
),
)
],
),
);
}
}
小开

你也可以把你的脚手架作为你的MaterialApp的家。这对我很管用。

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

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

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

你可以给你自己的文本样式，因为你想。

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

提交答案