我们在上一章回中介绍了Button Widget,本章回中将介绍 Widget的State,闲话休提,让我们一起Talk Flutter吧。
概念介绍
在Flutter中Widget无法被直接修改,如果想要修改Widget,那么需要通过修改Widget的状态(State)来间接修改Widget.
Flutter提供了两种类型的Widget,StatelessWidget
和StatefulWidget
。在StatefulWidget中包含一个State
对象,我们通过setState
()方法可以修改该对象,Flutter检测到State被修改后会自动更新Widget.
使用方法
- 创建一个StatefulWidget类的子类,并且重写父类中的createState();
- 创建一个State类的子类,并且重写该类的build()方法;
- 在createState()方法中创建State子类对象;
示例代码
class StatefulAppEx extends StatefulWidget {
const StatefulAppEx({super.key});
State<StatefulWidget> createState() {
// TODO: implement createState
return _StatefulAppEx();
}
}
class _StatefulAppEx extends State<StatefulAppEx> {
String str = "Test string";
void _updatText() {
setState(() {
str = "text is changed";
});
}
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text(str),
),
floatingActionButton: FloatingActionButton(
onPressed: _updatText,
tooltip: "update text",
child: const Icon(Icons.update),
),
);
}
}
class HelloApp extends StatelessWidget {
const HelloApp({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primaryColor: Colors.blue),
home: const StatefulAppEx(),
);
}
}
void main() {
runApp(HelloApp());
}
在上面的代码中我们创建一个StatelessWidget,然后用它加载一个StatefullWidget,该Widget中的代码完全按照上面方法中的步骤实现,我们在该Widget中添加了一个浮动Button,点击Button就会修改界面中Text Widget
显示的内容。我在这里就不演示程序的运行结果了,建议大家自己去实践。
看官们,关于Widget State的内容就介绍到这里,欢迎大家在评论区交流与讨论!