Flutter入門之有狀態組件

StatefulComponent使用方法入門

在上一篇Flutter入門之無狀態組件中我們講到了無狀態組件,所謂的無狀態組件指的就是其內部的狀態是來自其父組件並使用final類型的變量來存儲，當組件被build的時候它們就使用這些不可變的數據來構建自己的UI。
為了構建更加復雜且可和用戶產生交互的組件，在flutter中提供了StatefulComponents來實現這種需求。
下面來看一個簡單的例子‘點擊按鈕，並在按鈕文字上不斷更新點擊的次數’。

import 'package:flutter/material.dart';
import 'flat_color_button.dart';

class Counter extends StatefulComponent { //（1）
  _CounterState createState() => new _CounterState(); //（2）
}

class _CounterState extends State<Counter> { //（3）
  int _count = 0; //（3）

  void _increment() {
    setState(() { //（4）
      ++_count;
    });
  }

  Widget build(BuildContext context) {
    return new Container(
        decoration: new BoxDecoration(backgroundColor: Colors.grey[100]),
        child: new Center(
            child: new RaisedButton(
                onPressed: _increment,
                child: new Text('click count : ${_count}'))));
  }
}

main() {
  runApp(new MaterialApp(
      title: 'counter', routes: {'/': (RouteArguments args) => new Counter()}));
}

運行結果如下：

代碼解釋如下：

• （1）你可能覺得有些奇怪，為什么StatefulComponent和State要分開使用而不是集成在StatefulComponent內部，這是因為它們兩個在程序的運行過程中有各自的生命周期，StatefulComponent僅用來表示控件的表現形式隨時可能發生改變，而State的生命周期存在與兩次build方法之間。
• （2）當框架得知組件是StatefulComponent的時候回去調用createState()來獲得其組件內容。
• （3）State內部存儲可變狀態值，並通過實現build來構建組件。
• （4）這里非常重要，當在State內部改變任何子控件需要的變量時，都需要使用setState，當調用了setState后，底層框架會把當前控件標記為一個‘臟’組件，接着會在必要的時刻重新調用組件的build方法來刷新其子控件，由此起到刷新的作用

StatefulComponent的基本用法就是這樣，再復雜的控件設計，只要遵循以上的規范，就能有良好的用戶體驗。