之前使用的都是无状态控件,无状态控件从父控件接收参数,以final成员变量存储。当一个控件被build时,它使用这些存储的值作为创建控件的参数。
为了构建更友好的体验,比如以更有趣的方式对用户的输入做出响应,应用程序通常会有一些状态。Flutter使用StatefulWidgets实现这个想法。StatefulWidgets能够生成有状态对象的控件,然后用来保持状态。
import 'package:flutter/material.dart';
void main() {
runApp(
new MaterialApp(
title: 'Flutter实例',
home: new Counter(),
),
);
}
class Counter extends StatefulWidget {
@override
_CounterState createState() => new _CounterState();
}
class _CounterState extends State<Counter> {
int _count = 0;
void _increment() {
setState(
() {
_count += 1;
}
);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Flutter实例'),
),
body: new Center(
child: new Text(
'按钮点击 $_count 次${ _count == 0 ? '' : '' }'),
),
floatingActionButton: new FloatingActionButton(
onPressed: _increment,
tooltip: '增加',
child: new Icon(Icons.add),
),
);
}
}
为什么StatefulWidget和State是单独的对象呢?在Flutter中,这两种类型的对象有不同的生命周期。控件是临时对象,用于在当前状态下构建应用程序的呈现。State对象在被build()调用时是持久的,允许它们记住信息。
上面的实例接受用户的输入并在构建方法中直接使用结果。在复杂的应用程序中,控件层次结构的不同控件可能负责不同功能;例如一个控件可能呈现一个复杂的用户界面,目的是收集具体信息,比如日期和位置,而另一个控件可以使用该信息来改变整体呈现。
import 'package:flutter/material.dart';
void main() {
runApp(
new MaterialApp(
title: 'Flutter实例',
home: new Counter(),
),
);
}
class CounterDisplay extends StatelessWidget {
CounterDisplay({this.count});
final int count;
@override
Widget build(BuildContext context) {
return new Center(
child: new Text('按钮点击 $count 次'),
);
}
}
class CounterIncrementor extends StatelessWidget {
CounterIncrementor({this.onPressed});
final VoidCallback onPressed;
@override
Widget build(BuildContext context) {
return new FloatingActionButton(
onPressed: onPressed,
tooltip: '增加',
child: new Icon(Icons.add),
);
}
}
class Counter extends StatefulWidget {
@override
_CounterState createState() => new _CounterState();
}
class _CounterState extends State<Counter> {
int _count = 0;
void _increment() {
setState(
() {
_count += 1;
}
);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Flutter实例'),
),
body: new CounterDisplay(count: _count),
floatingActionButton: new CounterIncrementor(onPressed: _increment),
);
}
}
在上面的实例中,将计数显示(CounterDisplay)和计数改变(CounterIncrementor)干净的分离。虽然效果和上一个实例相同,但功能分离可以让一个控件中封装更复杂,同时也让父级更简单。