Question

我知道主题对象“ ThemeData”，我也正在使用它，但是but需要扩展它。

我要完成的工作是定义样式集以引用整个应用程序。例如我有这个

child: Text(
  advisoryServiceStatus[item.status - 1],
  style: TextStyle(
      color: Color.fromRGBO(0, 0, 0, 0.6),
      fontSize: 12,
      fontWeight: FontWeight.w500),
),

我想将TextStyle移动到文件中，以便我可以做类似的事情

child: Text(
  advisoryServiceStatus[item.status - 1],
  style: extendedThemeConfig.textStyles.mutedText,

但是我无法正确定义样式对象。这是我尝试过的。也许我不应该使用类，但是我没有设法将它们定义为对象。（我对概念的理解有点简陋）

这就是我试图定义我的extendedThemeConfig的方式

class TextStyles {
  final TextStyle mutedText = TextStyle(
      color: Color.fromRGBO(0, 0, 0, 0.6),
      fontSize: 12,
      fontWeight: FontWeight.w500);
}

class ExtendedThemeConfig {
  TextStyles textStyles;
}

const extendedThemeConfig = ExtendedThemeConfig;

Answer 1

为什么您的方法行不通

它可能确实有效，但是不支持诸如热重装之类的功能，因为您在应用中引入了全局状态，而这通常并不是您想要的。

那么，如何做得更好？

我已经更详细地回答了类似的问题here，但这是适合您问题的版本：

因为Flutter是开源的，所以我们只看how the Theme is implemented并复制该代码即可创建一个自定义的小部件，其功能类似于Theme。这是一个精简版本：

@immutable
class MyThemeData {
  MyThemeData({
    this.mutedText,
  });

  final TextStyle mutedText;
}

class MyTheme extends StatelessWidget {
  MyTheme({
    Key key,
    @required this.data,
    @required this.child,
  }) : super(key: key);

  final MyThemeData data;
  final Widget child;

  static MyThemeData of(BuildContext context) {
    return (context.ancestorWidgetOfExactType(MyTheme) as MyTheme)?.data;
  }

  @override
  Widget build(BuildContext context) => child;
}

现在，您可以将MaterialApp包装在MyTheme小部件中：

MyTheme(
  data: MyThemeData(
    mutedText: ...,
  ),
  child: ... (here goes the MaterialApp)
)

然后，您可以在应用中的任何地方编写MyTheme.of(context).mutedText。
您可以根据需要调整MyThemeData类，存储所需的任何内容。

在Flutter（Dart）中定义主题对象的好方法是什么？

1 个答案: