flutter-StatelessWidget與StatefulWidget

StatelessWidgetStatefulWidgetflutter的基礎組件,平常開發中自定義Widget都是選擇繼承這二者之一。app

二者的區別在於狀態的改變StatelessWidget面向那些始終不變的UI控件,好比標題欄中的標題;而StatefulWidget則是面向可能會改變UI狀態的控件,好比有點擊反饋的按鈕。less

StatelessWidget就沒什麼好研究的了,StatefulWidget的建立須要指定一個State,在須要更新UI的時候調用setState(VoidCallback fn),並在VoidCallback中改變一些變量數值等,組件會從新build以達到刷新狀態也就是刷新UI的效果。ide

官方有個StatefulWidget的例子,經過點擊按鈕使屏幕上的Text數值逐漸增加,能夠很好理解StatefulWidget的使用ui

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
class Counter extends StatefulWidget {
// This class is the configuration for the state. It holds the
// values (in this nothing) provided by the parent and used by the build
// method of the State. Fields in a Widget subclass are always marked "final".

@override
_CounterState createState() => new _CounterState();
}

class _CounterState extends State<Counter> {
int _counter = 0;

void _increment() {
setState(() {
// This call to setState tells the Flutter framework that
// something has changed in this State, which causes it to rerun
// the build method below so that the display can reflect the
// updated values. If we changed _counter without calling
// setState(), then the build method would not be called again,
// and so nothing would appear to happen.
_counter++;
});
}

@override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance
// as done by the _increment method above.
// The Flutter framework has been optimized to make rerunning
// build methods fast, so that you can just rebuild anything that
// needs updating rather than having to individually change
// instances of widgets.
return new Row(
children: <Widget>[
new RaisedButton(
onPressed: _increment,
child: new Text('Increment'),
),
new Text('Count: $_counter'),
],
);
}
}

解耦

上面的例子比較簡單,當層級多、狀態多的狀況下,這樣的代碼會致使閱讀性、擴展性較低的不友好狀況發生。代碼整潔、代碼解耦在平常開發中都很是重要,官方也是很是注重這一點,也提供了思路,將按鈕和文本控件從Counter分離,Counter負責更新狀態,按鈕和文本控件只負責顯示,這樣達到了解耦,保持代碼整潔,擴展性也對應提升。this

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
class CounterDisplay extends StatelessWidget {
CounterDisplay({this.count});

final int count;

@override
Widget build(BuildContext context) {
return new Text('Count: $count');
}
}

class CounterIncrementor extends StatelessWidget {
CounterIncrementor({this.onPressed});

final VoidCallback onPressed;

@override
Widget build(BuildContext context) {
return new RaisedButton(
onPressed: onPressed,
child: new Text('Increment'),
);
}
}

class Counter extends StatefulWidget {
@override
_CounterState createState() => new _CounterState();
}

class _CounterState extends State<Counter> {
int _counter = 0;

void _increment() {
setState(() {
++_counter;
});
}

@override
Widget build(BuildContext context) {
return new Row(children: <Widget>[
new CounterIncrementor(onPressed: _increment),
new CounterDisplay(count: _counter),
]);
}
}
相關文章
相關標籤/搜索