在flutter中使用DefaultTextStyle

vlf7wbxs 于 2023-05-19 发布在 Flutter

关注(0)|答案(3)|浏览(143)

我尝试应用一个DefaultTextStyle，但即使样式已定义且可用（通过调用DefaultTextStyle.of(context).style建立），默认情况下它不会应用到子Text对象。我到底做错了什么，还是不明白？
下面是我的调用类中的build方法，我在其中定义了我的DefaultTextStyle：

Widget build(BuildContext context) {
    return new MaterialApp(
      onGenerateTitle: (BuildContext context) =>
      Strings.of(context).getStr('app_title'),
      localizationsDelegates: [
        const StringsDelegate(),
        GlobalWidgetsLocalizations.delegate,
      ],
      localeResolutionCallback: Strings.resolveLocale,
      // Watch out: MaterialApp creates a Localizations widget
      // with the specified delegates. DemoLocalizations.of()
      // will only find the app's Localizations widget if its
      // context is a child of the app.
      theme: new ThemeData(
        primarySwatch: Colors.blue,
        ),
      home: new DefaultTextStyle(
        style: new TextStyle(
          fontWeight: FontWeight.bold,
          decoration: TextDecoration.underline,
          decorationColor: Colors.red,
          decorationStyle: TextDecorationStyle.wavy,
          color: Colors.blue
          ),
        child: new StatusPage())
      );
  }

这里是StatusPage，我尝试使用DefaultTextStyle：

class StatusPage extends MyStatelessWidget {
  @override
  Widget build(BuildContext context) {
    TextStyle style = DefaultTextStyle.of(context).style;
    print("STYLE: $style");
    return new Scaffold(
      appBar: new AppBar(
        title: getText(context, 'app_title')
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text('wibble', style:style),
            new ActivityStatus(),
            new MonitoringStatus()]
          )));
  }
}

使用所示的代码，文本“wibble”以适当的样式正确显示。我从文档中的理解是，这种样式应该默认应用，所以我不需要为“wibble”的Text构造函数提供样式参数。
但是，如果我删除样式参数，我不会从DefaultTextStyle中获得样式。
我错过了什么？

flutter

来源：https://stackoverflow.com/questions/49806705/use-of-defaulttextstyle-in-flutter

3条答案

按热度按时间

k5hmc34c1#

像这样将DefaultTextStyle应用于Scaffold，您将在所有子文本小部件中获得此样式

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        theme: new ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: new StatusPage());
  }
}

class StatusPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    TextStyle style = DefaultTextStyle.of(context).style;
    return new Scaffold(
        appBar: new AppBar(),
        body: new DefaultTextStyle(
            style: new TextStyle(
                inherit: true,
                fontSize: 20.0,
                fontWeight: FontWeight.bold,
                decoration: TextDecoration.underline,
                decorationColor: Colors.red,
                decorationStyle: TextDecorationStyle.wavy,
                color: Colors.blue),
            child: new Center(
              child: new Column(
                children: <Widget>[
                  new Text("hello"),
                ],
              ),
            )));
  }
}

赞(0）回复(0）举报 2023-05-19

a0x5cqrl2#

我以前也遇到过同样的问题，我认为当使用custome字体或更改语言时（至少这是我的情况），我的解决方案是去MaterialApp小部件，然后像这样覆盖所有textTheme属性：

fontFamily: "STCBold",
              textTheme: GoogleFonts.cairoTextTheme(textTheme).copyWith(
                  headline1: TextStyle(height: 1),
                  headline2: TextStyle(height: 1),
                  headline3: TextStyle(height: 1),
                  headline4: TextStyle(height: 1),
                  headline5: TextStyle(height: 1),
                  headline6: TextStyle(height: 1),
                  subtitle1: TextStyle(height: 1),
                  subtitle2: TextStyle(height: 1),
                  bodyText1: TextStyle(height: 1),
                  bodyText2: TextStyle(height: 1),
                  caption: TextStyle(height: 1),
                  button: TextStyle(height: 1),
                  overline: TextStyle(height: 1),
              ),

这将使所有文本主题没有额外的填充，因此所有文本将是紧凑的。但请确保在所有代码中使用style: Theme.of(context).textTheme.WHATEVERTEXT.

赞(0）回复(0）举报 2023-05-19

zz2j4svz3#

我也遇到过类似的问题。我试图更改Card中Text小部件的文本颜色。我有这个代码，但没有工作：

DefaultTextStyle.merge(
 style: const TextStyle(color: Colors.red),
 child: Card(
  color: Colors.blue,
  child: Text("Should be red"),
 ),
)

这不起作用，因为Card小部件创建了一个Material小部件，而Card内的Text小部件使用Material小部件中的TextStyle。这就是为什么用DefaultTextStyle.merge Package Card不会更改文本颜色的原因。
要更改Card中的文本颜色，您可以使用DefaultTextStyle.merge Package 文本小部件：

Card(
 color: Colors.blue,
 child: DefaultTextStyle.merge(
 style: const TextStyle(color: Colors.red),
 child: const Text("Should be red"),
 ),
)

赞(0）回复(0）举报 2023-05-19

我来回答

在flutter中使用DefaultTextStyle

3条答案

相关问题

热门标签

最新问答