要在您需要的小部件树中传递和获取值InheritedWidget
。
这是一种特殊类型Widgets
,仅在小部件之间传输信息(如Theme
Delivers ThemeData
)。您不能ThemeData
使用新字段进行扩展,因为扩展不会触发更新Theme
。但是您可以创建自己的CustomTheme
,它将与原始版本共存。
class CustomThemeData {
const CustomThemeData(this.heading);
final TextStyle heading;
@override
bool operator ==(Object other) =>
identical(this, other) ||
other is CustomThemeData &&
runtimeType == other.runtimeType &&
heading == other.heading;
@override
int get hashCode => heading.hashCode;
}
现在创建一个InheritedWidget
将提供自定义主题数据值(通过of
)并将添加更新数据的可能性(通过update
)
class CustomTheme extends InheritedWidget {
const CustomTheme({
Key? key,
required this.data,
required this.onUpdate,
required Widget child,
}) : super(key: key, child: child);
final CustomThemeData data;
final void Function(CustomThemeData) onUpdate;
static CustomThemeData of(BuildContext context) {
return context.dependOnInheritedWidgetOfExactType<CustomTheme>()!.data;
}
static void update(BuildContext context, CustomThemeData data) {
context.dependOnInheritedWidgetOfExactType<CustomTheme>()!.onUpdate(data);
}
@override
bool updateShouldNotify(covariant CustomTheme oldWidget) {
return data != oldWidget.data;
}
}
这是自定义主题的持有人
class ThemeSwitcherWidget extends StatefulWidget {
final CustomThemeData initialTheme;
final Widget child;
const ThemeSwitcherWidget({
Key? key,
required this.initialTheme,
required this.child,
}) : super(key: key);
@override
_ThemeSwitcherWidgetState createState() => _ThemeSwitcherWidgetState();
}
class _ThemeSwitcherWidgetState extends State<ThemeSwitcherWidget> {
CustomThemeData? _updatedTheme;
@override
Widget build(BuildContext context) {
return CustomTheme(
data: _updatedTheme ?? widget.initialTheme,
onUpdate: (newData) => setState(() {
_updatedTheme = newData;
}),
child: widget.child,
);
}
}
这是一个关于如何使用所有这些美丽的例子:
void main() {
runApp(
const ThemeSwitcherWidget(
initialTheme: CustomThemeData(TextStyle()),
child: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'text',
style: CustomTheme.of(context).heading,
),
ElevatedButton(
onPressed: () {
CustomTheme.update(
context,
const CustomThemeData(TextStyle(
color: Colors.red,
fontSize: 44,
)));
},
child: const Text('Change theme')),
],
),
),
),
);
}
}
为了使代码不那么冗长,你可以使用provider
它来为你做所有的更新。