Flutter狀態基礎知識

Widge的狀態管理主要分為三種場景

• Widget自身狀態管理

  狀態有關介面外觀效果的（顏色、動畫）

• 子Widget狀態管理

  狀態有關使用者資料（複選框的選中狀態、滑塊位置）

• 父Widget和子Widget都存在的狀態管理

  某一個狀態是不同Widget共享的

狀態生命週期

有狀態的Widget的狀態生命週期，主要是在使用者參與的相關情況下，對於相關聯的元件從建立、現實、更新、停止、銷燬的各個階段。Flutter的有狀態的生命週期如下圖所示：

從上圖可以知道，大概可以分為三個階段

• 初始化階段
• 更新階段
• 銷燬階段

在初始化階段中，主要是由建構函式、狀態建立、狀態依賴、檢視構建等生命週期構成。涉及的內容主要有

• 建構函式

  生命週期的起點，通過呼叫createState()來建立一個狀態

• initState()

  僅僅被呼叫一次

• didChangeDependencies()

  用來處理狀態元件依賴關係變化，在initState()被呼叫後進行呼叫

• build()

  用於構建檢視

在更新階段，主要是涉及元件的狀態更新操作。在更新階段中所涉及到的內容主要有

• setState()

  通過呼叫該函式，告知系統更新後資料重建檢視

• didChangeDependencies()

  當狀態元件的依賴關係發生變化後，會自動回撥，從而觸發元件的構建操作

• didUpdateWidget()

  配置發生變化或者熱過載時，系統會回撥該函式從而進行更新檢視

在銷燬階段，主要用來移除或銷燬元件。在銷燬階段中涉及到的內容主要有

• deactivate()

  元件內可見狀態發生變化時，會被呼叫，此時元件會暫時被移除

• dispose()

  元件需要永久性被移除時呼叫，元件被銷燬。在呼叫前，可以進行清理工作

自身狀態管理

當Widget自身的狀態需要改變時，呼叫setState()，從而進行檢視重繪。

父子元件狀態管理

子狀態往往是一個無狀態的元件，父Widget只需要告訴子Widget什麼時候需要更新即可。示例程式碼如下：

son.dart

子元件是一個無狀態的元件，其狀態的改變都是根據父元件進行更新的。

import 'package:flutter/material.dart';
class TapBoxB extends StatelessWidget {
  const TapBoxB({Key? key, this.active = false, required this.onChanged})
      : super(key: key);
  final bool active;
  final ValueChanged<bool> onChanged;
  void _handleTap() {
    onChanged(!active);
  }
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _handleTap,
      child: Container(
        child: Center(
          child: Text(
            active ? 'Active' : 'Inactive',
            style: const TextStyle(fontSize: 32.0, color: Colors.white),
            textDirection: TextDirection.ltr,
          ),
        ),
        width: 200.0,
        height: 200.0,
        decoration: BoxDecoration(
          color: active?Colors.lightGreen[700]:Colors.grey[600],
        ),
      ),
    );
  }
}

parent.dart

父元件是一個有狀態的元件，父元件通過子元件的建構函式將當前狀態傳遞給TapBoxB，從而讓其接收到狀態後進行渲染操作。

import 'package:flutter/material.dart';
import 'package:flutter_demo/son.dart';
void main()=>runApp(ParentWidget());
class ParentWidget extends StatefulWidget{

  @override
  State<StatefulWidget> createState() {
    return ParentWidgetState();
  }
}
class ParentWidgetState extends State<ParentWidget>{
  bool _active=false;
  void _handleTapBoxChanged(bool newValue){
    setState(() {
      _active=newValue;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Container(
      child: TapBoxB(
        active: _active,
        onChanged: _handleTapBoxChanged,
      ),
    );
  }
}

上面的程式碼執行後的結果如下

混合狀態管理

子元件自身管理一些內部狀態，父元件管理其他外部狀態。在此中模式下，子元件使用建構函式接收父元件傳遞的狀態，並使用回撥函式返回子元件內部的狀態。