Flutter事件交互和State管理

Flutter的Widget有Statful(有状态的)和Stateless(无状态的)。比如继承自StatefulWidget的有Checkbox、Radio、Slider、Form等,这些Widget用户都是可以做一些交互的,同样的继承自StatelessWidget的Widget有Text、Icon等。有状态和无状态的主要区别在于:有状态的Widget在其内部都有一个state用来标记是否发生了变化,然后调用setState()方法来更新自己。

Widget相当于时一个暂时的对象,只是为了展示和布局当前状态时用的,一旦状态发生了改变,它就会失效并且重绘;而State从某种角度来说是个永久对象,它里面存储了一些必要信息,每次通过比较,只更新和修改差异化的东西。

创建Stateful Widget示例

关键点:
1、创建一个Stateful Widget需要两个类,分别继承自StateFulWidget和State
2、state对象包含widget的state和widget的build()方法
3、当widget的state改变的时候,state对象会调用setState()方法,告诉框架去重绘widget

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
class FavoriteWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() => new _FavoriteWidgetState();
}

class _FavoriteWidgetState extends State {
var _isFavorited = true; // 是否喜欢
var _favoriteCount = 11; // 喜欢个数

_toggleFavorite() {
setState((){
if(_isFavorited) {
_favoriteCount -= 1;
} else {
_favoriteCount += 1;
}
_isFavorited = !_isFavorited;
});
}

@override
Widget build(BuildContext context) {
return new Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Container(
padding: const EdgeInsets.all(0.0),
margin: const EdgeInsets.all(0.0),
child: new IconButton(icon: (_isFavorited ? new Icon(Icons.star) : new Icon(Icons.star_border)), onPressed: _toggleFavorite, color: Colors.red),
),
new SizedBox(
width: 18.0,
child: new Container(
child: new Text("$_favoriteCount"),
),
)
],
);
}
}

状态管理

最通用的有三种方式:
1、自己管理State
2、父类管理State
3、混合管理

自己管理State

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
class _TapboxA extends StatefulWidget {
@override
State<StatefulWidget> createState() => new _TapboxAState();
}

class _TapboxAState extends State<_TapboxA> {
var _active = false;
_handleTap() {
setState(() {
_active = !_active;
});
}

@override
Widget build(BuildContext context) {
return new GestureDetector(
onTap: _handleTap,
child: new Container(
width: 200.0,
height: 200.0,
color: _active ? Colors.lightGreen[600] : Colors.grey[500],
child: new Center(
child: new Text(
_active ? 'Active' : 'Inactive',
style: new TextStyle(fontSize: 32.0, color: Colors.white),
),
),
),
);
}
}

父控件控制State

该控制的核心在于:回调。父控件通过传递参数控制子控件的展示,子控件通过函数的回调,改变父控件的值,然后父控件调用setState()方法再反馈到具体的子控件的展示上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
class _TapBoxB extends StatelessWidget {   // 此时子控件是Stateless的 
// var active = false;
final active;
final ValueChanged<bool> onChanged;

_TapBoxB({Key key, this.active: false, @required this.onChanged})
: super(key: key);

void _handleTap() {
onChanged(!active);
}

@override
Widget build(BuildContext context) {
return new GestureDetector(
onTap: _handleTap,
child: new Container(
width: 200.0,
height: 200.0,
color: _active ? Colors.lightGreen[600] : Colors.grey[500],
child: new Center(
child: new Text(
active ? 'Active' : 'Inactive',
style: new TextStyle(fontSize: 32.0, color: Colors.white),
),
),
),
);
}
}

class ParentWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new _ParentWidgetState();
}
}

class _ParentWidgetState extends State<ParentWidget> {
var _active = false;
_handleTapboxChanged(bool newValue) {
setState(() {
_active = newValue;
});
}

@override
Widget build(BuildContext context) {
return new Container(
child: new _TapBoxB(
active: _active, // 传值
onChanged: _handleTapboxChanged, // 回调,用于触发回调
),
);
}
}

父控件控制State

父控件控制一些自己需要的State,子控件控制一些自己的State。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
class _ParentWidget extends StatefulWidget {
bool active = false;
@override
State<StatefulWidget> createState() => new _ParentWidgetState();
}

class _ParentWidgetState extends State<_ParentWidget> {

void _handleTapboxChanged(bool newValue) {
setState(() {
widget.active = newValue;
});
}

@override
Widget build(BuildContext context) {
return new Container(
child: new TapboxC(onChanged: _handleTapboxChanged, active: widget.active),
);
}
}

class TapboxC extends StatefulWidget {
final bool _active;
bool _highlight = false;
final ValueChanged<bool> onChanged;

TapboxC({Key key, bool active, @required this.onChanged})
:this._active = active, super(key: key) { }

@override
State<StatefulWidget> createState() => new _TapboxCState();
}

class _TapboxCState extends State<TapboxC> {

void _handleTap() {
widget.onChanged(!widget._active);
}

void _handleTapDown(TapDownDetails details) {
setState((){
widget._highlight = true;
});
}

void _handleTapUp(TapUpDetails details) {
setState((){
widget._highlight = false;
});
}

void _handleTapCancel(){
setState((){
widget._highlight = false;
});
}

@override
Widget build(BuildContext context) {
return new GestureDetector(
onTap: _handleTap,
onTapDown: _handleTapDown,
onTapUp: _handleTapUp,
onTapCancel: _handleTapCancel,
child: new Container(
width: 200.0,
height: 200.0,
decoration: new BoxDecoration(
color: widget._active ? Colors.lightGreen[600] : Colors.grey[500],
border: widget._highlight
? new Border.all(color: Colors.teal[600], width: 10.0)
: null,
),
),
);
}
}

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :