我不明白 Flutter 中 Theme 类的意义

Posted 2023-02-23

【中文标题】我不明白 Flutter 中 Theme 类的意义

【英文标题】：I don't understand the point of the Theme class in Flutter

【发布时间】：2020-10-03 18:41:15

【问题描述】：

所以我正在使用 Flutter，我需要一个用于 ListView 的自定义小部件，其中每个小部件都有基于某些数据的自己的主题。

正确的做法似乎是这样的：

class CustomWidget extends StatefulWidget 
  CustomWidget(Key key, this.data) : super(key: key);

  final Color data;
  @override
  _CustomWidgetState createState() => _CustomWidgetState();


class _CustomWidgetState extends State<CustomWidget> 
  @override
  Widget build(BuildContext context) 
    return Theme(
      data: ThemeData(primaryColor: widget.data),
      child: Builder(builder: (context) 
        return Container(
          color: Theme.of(context).primaryColor,
        );
      ),
    );
  

但如果我这样做，这究竟有什么好处呢？ 专门在容器中应用颜色？为什么我不能只做color: widget.data？

如果TextTheme 之类的东西自动应用于Theme() 的每个Text() 颓废，不是更有意义吗？

【问题讨论】：

如果您的颜色只是一个参数，那么最好使用color: widget.data 。在此处查看不同的用例flutter.dev/docs/cookbook/design/themes

@SamiHaddad 发布的链接包含一个部分Using a Theme，它表示您必须每次都使用Theme.of(context)，除了一些元素，如FloatingActionButton，它会自动执行。我是否错误地认为有些人会自动而不是全部做到这一点感觉有点不一致？

【参考方案1】：

ThemeData 用于配置 Theme 或 MaterialApp 小部件：

https://api.flutter.dev/flutter/material/ThemeData-class.html

primaryColor 值不影响Text 小部件的颜色，来自docs：

应用主要部分（工具栏、标签栏等）的背景颜色

如果你想改变文本的颜色，那么你可以使用textTheme 属性：

class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        accentColor : Colors.black,
        textTheme: TextTheme(bodyText2: TextStyle(color: Colors.purple)),
        primaryColor : Colors.black
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  

primaryColor: 用于应用栏

accentColor: 用于给前景着色

textTheme: 会改变文字的颜色和样式

工作示例：

https://dartpad.dartlang.org/bba537def9dbfa771400309a4e6415ed

【讨论】：

但是，如果我现在想为 Center() 小部件和下面的所有内容添加不同的主题怎么办？无论我尝试什么，主题仍然会默认为MaterialApp()的主题

你可以覆盖主题，检查“0”的颜色dartpad.dartlang.org/bba537def9dbfa771400309a4e6415ed

对不起，如果我太密集了，但我没有看到任何被覆盖的东西

这里取主题数据dartpad.dartlang.org/bba537def9dbfa771400309a4e6415ed，这里覆盖dartpad.dartlang.org/69075f485c48d22d0c368e86317d9434

主题日期正在为小部件中的所有内容应用主题。但是如果您想覆盖主题，那么您需要将主题单独添加到小部件中，就像我向您展示的那样。这就像android原生开发，你有一个styles.xml文件，它将为整个应用程序添加主题，然后如果你想改变单个视图的颜色，你可以单独为它添加颜色