作者 | 弗拉德
来源 | 弗拉德(公众号:fulade_me)
Statelesswidget
如果一个Widget从初始化到使用再到销毁,整个过程中都不需要修改其UI的样式,例如纯展示页面,我们就用Statelesswidget
。常见的Statelesswidget
有:Text
、Icon
、ImageIcon
、Dialog
等。可以看到这些往往都是一些展示类的,不需要改变其状态的控件。
使用Statelesswidget
更轻量,更节省内存资源。初始化Statelesswidget
的时候不会附带一些动态更新UI的方法,这样也会提升我们软件的性能。
需要注意的是:
在iOS开发中,初始化一个Label
并命名为la
,改变它的文字内容,会调用la.text = @"new text"
,我们可以理解为Label
不是Statelesswidget
的,因为它的text
属性被改变了。那Flutter的Text
为什么又是Statelesswidget
的呢?因为Flutter中一切Widget都是 “配置文件”,当我们修改文本之后,Flutter会帮助我们重新初始化一个Text
,而不是修改当前的Text
对象,这是与原生开发不一样的地方。
Statefulwidget
Statefulwidget
是可变的Widget,在我们的开发中会大量使用Statefulwidget
。它实现了一个setState
方法,当我们调用这个方法的时候,该Statefulwidget
会被重新渲染,注意是重新被渲染,而不是局部更新。
当我们调用setState
时,Flutter在收到该消息后,会重新调用其build
方法重新构建这个widget,从而达到更新UI的目的。
来看如下代码:
class StatefulWidgetDemoPage extends StatefulWidget {
@override
_StatefulWidgetDemoPageState createState() => _StatefulWidgetDemoPageState();
}
class _StatefulWidgetDemoPageState extends State<StatefulWidgetDemoPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {});
},
child: Icon(Icons.add),
),
appBar: AppBar(
title: Text("StatefuleWidget Demo"),
centerTitle: true,
backgroundColor: Colors.blue,
),
body: Column(
children: [
Container(
width: 100,
height: 100,
margin: EdgeInsets.all(10),
/// 颜色一个随机值
color: _randomColor(),
),
],
),
);
}
/// 获取一个随机的颜色值
_randomColor() {
return Color.fromARGB(255, Random().nextInt(255), Random().nextInt(255),
Random().nextInt(255));
}
}
我们定义了一个生成随机颜色的方法_randomColor()
,它会返回一个Color
对象,然后我们又定义了一个Container
,Container
的初始化参数color
的值是_randomColor()
的返回值。然后我们在FloatingActionButton
的onPressed
的方法中调用一下setState
方法,这个时候Flutter会重新绘制StatefulWidgetDemoPage
,所以每次点击按钮,我们可以看到Container
的颜色都是不一样的。
一切都是Widget
在Flutter中我们看到的UI元素都是由Widget
生成的,包括手势,在Flutter中也是Widget
。Widget
并不是我们看到的UI元素,我们实际看到的UI元素叫Element
,Widget
是Element
的配置数据。
我们写了大量的Widget
经Flutter处理渲染生成了Element
来展示在手机屏幕上。所以当我们调用setState
方法的时候,我们只是更新了配置数据,Flutter依照更新后的配置数据来生成新的Element
来达到渲染UI的目的。
注意
一个Widget
可以对应多个Elememt
对象,这等同与一个配置文件可以生成多个实例对象一样。
想体验以上的示例的运行效果,可以到我的Github仓库项目flutter_app
->lib
->routes
->statefulwidget_page.dart
查看,并且可以下载下来运行并体验。
网友评论