浅识Flutter 基本组件之有状态的widget(StatefulWidget)
StatefulWidget
StatefulWidget应用于Widget会在运行时发生变化的场景,也就是应用程序根据用户交互或网络请求状态下,页面显示的内容需要发生变化,即需要重新绘制新的Widget.
例如,应用程序的页面上有一个文本框组件Tex和一个按钮组件FloatingActonButton,在点击按钮后Tet组件上显示的内容发生变化.
使用StatefulWidget实现页面中Widget元素的动态变化,首先需要创建一个继承自StatefulWidget的类A,并在该类中实现createState()方法时返回一个State< StatefulWidget>对象;然后创建一一个继承自State 的类B,通常在类B中绘制应用程序的界面和- 些逻辑处理模块。下面详细介绍具体实现步骤。
(1)创建继承自StatefulWidget 的自定义类中StatefulWidgetPage.
继承自StatefulWidget的类的实现代码如下。
class mainpage extends StatefulWidget{
@override
State<StatefulWidget> createState() {
// TODO: implement createState
throw UnimplementedError();
}
}
(2)创建继承自State的自定义类一 StatefulWidgetPageState.
State是Flutter用来渲染动态Widget的类。当Widget 的State改变时,State对象会调用setState()方法,通知Flutter 框架去重绘Widget。 继承自State 类的StatefulWidgetPageState类的实现代码如下。
class dengji extends State{
String hh="快传温太医,娘娘要生了!";
@override
void showhh(){
setState(() {
hh='皇上,娘娘生了!!是位公主!!!';
});
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(title: Text('碎玉轩')),
body:Text(hh),
floatingActionButton: FloatingActionButton(
child:Icon(Icons.airline_seat_flat),
onPressed: (){
showhh();
print('生孩子ing。。。');
},
),
);
}
}
代码 *showhh();*表示单击页面上的悬停按钮时调用showhh()方法,该方法通过调用setState()方法动态改变页面上Text组件上的内容,即hh变量的值。
打开页面后的初界面
点击悬浮按钮后 打印出文本,同时页面显示的内容也发生改变。。