如何更改文本颜色,这是在一个不同的小部件上切换与Flutter提供商?
当开关打开时,将文本颜色更改为红色,否则更改为绿色。但是不要合并第一个和第二个小部件。
当点击开关按钮更改其他小部件的文本。
”
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
void main() => runApp(const SwitchApp());
class SwitchApp extends StatelessWidget {
const SwitchApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Switch Sample')),
body: const Center(
child: SwitchExample(),
),
),
);
}
}
class SwitchExample extends StatefulWidget {
const SwitchExample({super.key});
@override
State<SwitchExample> createState() => _SwitchExampleState();
}
class _SwitchExampleState extends State<SwitchExample> {
bool light = false;
@override
Widget build(BuildContext context) {
return Column(
children: [
Switch(
value: light,
activeColor: Colors.red,
onChanged: (bool value) {
setState(() {
light = value;
});
},
),
MyText()
],
);
}
}
class MyText extends StatelessWidget {
const MyText({super.key});
@override
Widget build(BuildContext context) {
return const Text('Change my color',
style: TextStyle(color: Colors.green));
}
}
”
1条答案
按热度按时间ih99xse11#
最简单的方法是将颜色向下传递到MyText小部件的构造函数中,因为MyText小部件是作为SwitchExample的子对象构建的,SwitchExample正在处理开关状态。
但是,如果你想使用provider,这样MyText就可以成为树中provider小部件下面任何地方的子小部件,你可以将Provider与ChangeNotifier一起使用:
查看Flutter的文档以获取更多信息:https://docs.flutter.dev/development/data-and-backend/state-mgmt/simple