【问题标题】:Use ThemeData as theme for CupertinoApp使用 ThemeData 作为 CupertinoApp 的主题
【发布时间】:2023-03-03 02:06:01
【问题描述】:

我的应用是使用MaterialApp 作为根小部件构建的。在这个材质应用中,我添加了一个主题如下:

MaterialApp(
  theme: myTheme,
  home: MyHomePage(),
  ...
)

final ThemeData myTheme = _buildTheme();

ThemeData _buildTheme() {
  final ThemeData base = ThemeData.light();
  return base.copyWith(
    ...
      textTheme: _buildMyTextTheme(base.textTheme),
      primaryTextTheme: _buildMyTextTheme(base.primaryTextTheme),
      accentTextTheme: _buildMyTextTheme(base.accentTextTheme),
      pageTransitionsTheme: PageTransitionsTheme(builders: {
        TargetPlatform.iOS: CupertinoPageTransitionsBuilder(),
      }));
}

TextTheme _buildMyTextTheme(TextTheme base) {
  return base
      .copyWith(
        headline:
            base.headline.copyWith(fontSize: 20.0, fontWeight: FontWeight.w500),
        title: base.title.copyWith(fontSize: 18.0, fontWeight: FontWeight.w400),
        subhead:
            base.subhead.copyWith(fontSize: 16.0, fontWeight: FontWeight.w400),
        body1: base.body1.copyWith(fontSize: 14.0, fontWeight: FontWeight.w400),
        body2: base.body2.copyWith(fontSize: 14.0, fontWeight: FontWeight.w500),
        caption: base.caption.copyWith(
          fontWeight: FontWeight.w400,
          fontSize: 12.0,
        ),
      )
      .apply(
        fontFamily: 'myfont',
        displayColor: Colors.black,
        bodyColor: Colors.black,
      );
}

我使用Theme.of(context.textTheme 将整个应用程序中的文本设置为小部件树的样式。

例如: 到我使用的标题

Text('Title', style:Theme.of(context).textTheme.title),

到我使用的字幕

Text('Title', style:Theme.of(context).textTheme.subhead),

它按预期工作。 但现在我想使用CupertinoApp,如果当前平台是 ios,因为它提供原生 ios 感觉就像

  • 列表项
  • 页面可以通过向后滑动来关闭。 滚动过四肢会触发 iOS 风格的弹簧过度滚动。

如何添加应用相同文本主题的 CupertionApp?

【问题讨论】:

  • 你检查了我回答的最后一个 sn-p 吗?

标签: ios flutter widget themes flutter-cupertino


【解决方案1】:

您可以用Theme 小部件包装CupertinoApp

Theme(
   data: yourThemeData(), //your theme data here
   child: CupertinoApp(...),
);

【讨论】:

  • 我试试看告诉你
  • 这是一个很好的解决方案,我这边运行良好,谢谢。
猜你喜欢
  • 1970-01-01
  • 2022-10-15
  • 2020-09-09
  • 2023-03-06
  • 2020-08-02
  • 1970-01-01
  • 1970-01-01
  • 2020-12-30
  • 1970-01-01
相关资源
最近更新 更多