【问题标题】:App's global ThemeData not working properly in flutter?应用程序的全局 ThemeData 在颤动中无法正常工作?
【发布时间】:2021-10-18 03:41:41
【问题描述】:

我想在我的应用中使用 ThemeData 的 textTheme 进行全局使用,而 textTheme 只是改变字体和颜色。

但是正如你在图片中看到的那样,Text Widgets 之间会有明显的区别。这种差异是怎么来的?因为上面标签的TextStyle其实和底部标签是一样的。 ThemeData 会做更多的事情来改变我的 TextStyle 吗?

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue,
          textTheme: TextTheme(
            headline1: TextStyle(fontSize: 17, color: Color(0xFFFF0000)),
          )),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
              style: Theme.of(context).textTheme.headline1,
            ),
            Text(
              'You have pushed the button this many times:',
              style: TextStyle(fontSize: 17, color: Color(0xFFFF0000)),
            ),
          ],
        ),
      ),
    );
  }
}

【问题讨论】:

    标签: flutter textstyle themedata


    【解决方案1】:

    两个文本看起来不同的原因是你没有指定它们的 fontWeight 和 flutter 不幸地给两个文本不同的默认 fontWeights。您只需为两者指定相同的 fontWeight 即可。我尝试过这个。这是代码:

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
              primarySwatch: Colors.blue,
              textTheme: TextTheme(
                headline1: TextStyle(fontSize: 17, color: Color(0xFFFF0000),
                    fontWeight: FontWeight.normal),
              )),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatelessWidget {
      const MyHomePage({Key? key, required this.title}) : super(key: key);
      final String title;
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                  style: Theme.of(context).textTheme.headline1,
                ),
                Text(
                  'You have pushed the button this many times:',
                  style: TextStyle(fontSize: 17, color: Color(0xFFFF0000),
                      fontWeight: FontWeight.normal),
                ),
              ],
            ),
          ),
        );
      }
    }
    

    【讨论】:

    • 是的!谢谢@TheUltimateOptimist ,似乎缺少 fontWeight 会对 TextTheme 中 color 的实现产生一些影响
    猜你喜欢
    • 2022-07-22
    • 1970-01-01
    • 1970-01-01
    • 2012-01-27
    • 2013-12-12
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-01-02
    相关资源
    最近更新 更多