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的基本用法就是這樣，再複雜的控件設計，只要遵循以上的規範，就能有良好的用戶體驗。