Flutter部件內部狀態管理

本文是 Flutter 部件內部狀態管理的小結，從部件的基礎開始，到部件的狀態管理，并且在過程中實現一個類似 Vue 的 v-model 的功能。

widget 基礎

widget（部件）

如 React 里萬物皆組件， Java 里萬物皆對象， Flutter 里，能看到的一切都是 widget（部件），如按鈕、文本框等等。

Flutter 內部已經為我們做了一些基礎的 widget ，例如：

狀態

狀態可以理解為 widget 內擁有的成員變量

無狀態 widget

無狀態是指該成員變量不可改變，即使用 final 修飾符，為常量，創建無狀態組件步驟如下：

創建一個類繼承 StatelessWidget

實現 build 方法（類比寫 HTML + CSS ）

import 'package:flutter/material.dart';class StateLessDemoWidget extends StatelessWidget { /// 如果定義非final修飾的成員變量，會提示 /// This class (or a class which this class inherits from) is marked as '@immutable', but one or more of its instance fields are not final: StateLessDemoWidget.listInde /// int [listIndex]; @override Widget build(BuildContext context) { return Container(); }}

有狀態 widget

有狀態則是指該 widget 內部的成員變量可以不使用 final 修飾符，并通過 setState() 方法改變成員變量的值時，引起 widget 的狀態改變并重繪（例如文本框綁定變量A，通過改變變量A修改文本框的值，這里的變量A可以理解為可變狀態）

有狀態 widget 通過實現 StatefulWidget 和 State 兩個子類實現，步驟如下：

import 'package:flutter/material.dart';/// 創建一個繼承[StatefulWidget]的widget類/// 這個類的效果類似收藏，有個空心的愛心圖標/// 點擊一下愛心填充紅色，再點擊一次就取消填充class FavoriteWidget extends StatefulWidget { @override _FavoriteWidgetState createState() => _FavoriteWidgetState();}/// [State]類，FavoriteWidget的具體實現/// 包含一個狀態[_isFavorited]class _FavoriteWidgetState extends State<FavoriteWidget> { bool _isFavorited = true; @override Widget build(BuildContext context) { return Row( mainAxisSize: MainAxisSize.min, children: [ Container( padding: EdgeInsets.all(0), child: IconButton( /// [_isFavorited] 為 true 時使用圖標 Icons.star 否則使用 Icons.star_border icon: (_isFavorited ? Icon(Icons.star) : Icon(Icons.star_border)), color: Colors.red[500], /// 當點擊時，改變狀態 onPressed: _toggleFavorite, ), ), ], ); } /// 改變[_isFavorited]的狀態 void _toggleFavorite() { setState(() { if (_isFavorited) { _isFavorited = false; } else { _isFavorited = true; } }); }}