Flutter中，管理状态的最常见的方法：
- Widget管理自身的状态
- 父Widget管理子Widget的状态
- 混合状态(父Widget和子Widget都管理状态)
1. Widget管理自身的状态
在自身Widget中更新视图。
在SelfPage类中，定义一个_active变量，定义一个_handleTap()点击事件函数，在调用该函数时更新_active变量的值，并调用setState()来更新视图；
代码示例如下：
class SelfPage extends StatefulWidget {
@override
_SelfPageState createState() => new _SelfPageState();
}
class _SelfPageState extends State<SelfPage> {
bool _active = false;
void _handleTap() {
setState(() {
_active = !_active;
});
}
Widget build(BuildContext context) {
return new GestureDetector(
onTap: _handleTap,
child: new Container(
child: new Center(
child: new Text(
_active ? 'Active' : 'Inactive',
style: new TextStyle(fontSize: 32.0, color: Colors.white),
),
),
width: 200.0,
height: 200.0
),
);
}
}
2. 父Widget管理子Widget的状态
在父Widget中，通知其子Widget更新视图。
在ParentPage类中，定义一个_active变量，用于赋值给子类，定义一个当状态发生变化时_handleChangeTap()函数，调用setState()来更新子类的视图；
在ChildPage 子类中，定义所需接收的参数值，active（变量），onChanged（事件）
代码示例如下：
class ParentStatePage extends StatefulWidget {
@override
_ParentStatePageState createState() => new _ParentStatePageState();
}
class _ParentStatePageState extends State<ParentStatePage> {
bool _active = false;
void _handleTapboxChanged(bool newValue) {
setState(() {
_active = newValue;
});
}
@override
Widget build(BuildContext context) {
return new Container(
child: new ChildPage(
active: _active,
onChanged: _handleTapboxChanged,
),
);
}
}
class ChildPage extends StatelessWidget {
ChildPage({Key key, this.active: false, @required this.onChanged})
: super(key: key);
final bool active;
final ValueChanged<bool> onChanged;
void _handleTap() {
onChanged(!active);
}
Widget build(BuildContext context) {
return new GestureDetector(
onTap: () {
_handleTap();
},
child: new Container(
child: new Center(
child: new Text(
active ? 'Active' : 'Inactive',
style: new TextStyle(fontSize: 32.0, color: Colors.white),
),
),
width: 200.0,
height: 200.0
),
);
}
}
3. 混合状态(父Widget和子Widget都管理状态)
可以通过父Widget来通知其子Widget更新视图，也可以子Widget自己来更新视图。
在2示例代码中，在原来的代码基础上，对子Widget类增加一个处理按下事件的函数，去更新视图
代码示例如下：
class ParentPage extends StatefulWidget {
@override
_ParentPageState createState() => new _ParentPageState();
}
class _ParentPageState extends State<ParentPage> {
bool _active = false;
void _handleTapboxChanged(bool newValue) {
setState(() {
_active = newValue;
});
}
@override
Widget build(BuildContext context) {
return new Container(
child: new TapboxC(
active: _active,
onChanged: _handleTapboxChanged,
),
);
}
}
class ChildPage extends StatefulWidget {
ChildPage({Key key, this.active: false, @required this.onChanged})
: super(key: key);
final bool active;
final ValueChanged<bool> onChanged;
bool _highlight = false;
void _handleTapDown(TapDownDetails details) {
setState(() {
_highlight = true;
});
}
void _handleTap() {
onChanged(!active);
}
Widget build(BuildContext context) {
return new GestureDetector(
// 处理按下事件时
onTapDown: () {
_handleTapDown();
},
onTap: () {
_handleTap();
},
child: new Container(
child: new Center(
child: new Text(
active ? 'Active' : 'Inactive',
style: new TextStyle(fontSize: 32.0, color: Colors.white),
),
),
width: 200.0,
height: 200.0,
decoration: new BoxDecoration(
color: _highlight ? Colors.lightGreen[700] : Colors.grey[600],
),
),
);
}
}
当应用中需要一些跨组件管理状态时，就需要全局状态管理了，可以使用一些专门用于状态管理的包，如Provider、Redux，读者可以在pub上查看其详细信息。
