使用 ThemeData 作为 CupertinoApp 的主题
Use ThemeData as theme for CupertinoApp
我的应用程序是使用 MaterialApp
作为根小部件构建的。对于这个 material 应用程序,我添加了一个主题如下:
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-style spring 过度滚动。
如何添加应用相同文本主题的 CupertionApp?
您可以用 Theme
小部件包装 CupertinoApp
:
Theme(
data: yourThemeData(), //your theme data here
child: CupertinoApp(...),
);
我的应用程序是使用 MaterialApp
作为根小部件构建的。对于这个 material 应用程序,我添加了一个主题如下:
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-style spring 过度滚动。
如何添加应用相同文本主题的 CupertionApp?
您可以用 Theme
小部件包装 CupertinoApp
:
Theme(
data: yourThemeData(), //your theme data here
child: CupertinoApp(...),
);