共计 1999 个字符,预计需要花费 5 分钟才能阅读完成。
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
查看,并且能够下载下来运行并体验。