应用程序的全局 ThemeData 在颤动中无法正常工作？

Posted 2023-02-23

【中文标题】应用程序的全局 ThemeData 在颤动中无法正常工作？

【英文标题】：App's global ThemeData not working properly in flutter?

【发布时间】：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)),
            ),
          ],
        ),
      ),
    );
  

【参考方案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 的实现产生一些影响