在 Flutter(Dart) 中定義主題對象的好方法是什么？

Question

我知道主題 object “ThemeData”，我也正在使用它，但可惜已經出現了擴展它的需要。

我想要完成的是定義樣式集以在我的應用程序中引用。 例如我有這個

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,

但我很難正確定義我的風格 object。 這是我嘗試過的。 也許我不應該使用類，但我還沒有設法將它們定義為對象。 （我對概念的理解有點寒酸）

這就是我嘗試定義我的擴展主題配置的方式

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

為什么你的方法不起作用

它可能確實有效，但不支持熱重載等功能，因為您將全局 state 引入您的應用程序，這通常不是您想要的。

那么，如何做得更好呢？

我已經在這里更詳細地回答了一個類似的問題，但這里有一個適合您的問題的版本：

因為 Flutter 是開源的，所以我們可以看看Theme是如何實現的，然后復制該代碼來創建一個自定義小部件，其功能就像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 class，存儲您想要的任何內容。