Table of Contents generated with DocToc
Flutter部件內部狀態管理
本文是 Flutter部件內部狀態管理的小結，從部件的基礎開始，到部件的狀態管理，並且在過程中實現一個類似 Vue 的 v-model 的功能。
widget 基礎
widget（部件）
如 React 裡萬物皆元件， Java 裡萬物皆物件，Flutter裡，能看到的一切都是 widget（部件），如按鈕、文字框等等。
Flutter內部已經為我們做了一些基礎的 widget ，例如：
Text: 這個就是一個文字部件，裡面用於放置文字Row,Column: 行列布區域性件Container: 可以理解為HTML裡的div
狀態
狀態可以理解為 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兩個子類實現，步驟如下：
- 建立一個
Widget類，繼承StatefulWidget - 建立一個繼承
State的類 - 在
State類裡建立狀態（成員變數），和實現build方法（畫介面）
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;
}
});
}
}
複製程式碼widget 管理內部狀態的三種方式
widget 自己管理狀態
其實和上邊的 有狀態部件 示例一樣的，直接上程式碼
import 'package:flutter/material.dart';
class TapboxA extends StatefulWidget {
@override
_TapboxAState createState() => _TapboxAState();
}
/// [TapboxA]擁有狀態[_active]，通過[_handleTap]方法管理[_active]
class _TapboxAState extends State<TapboxA> {
bool _active = false;
void _handleTap() {
setState(() {
_active = !_active;
});
}
Widget build(BuildContext context) {
return GestureDetector(
onTap: _handleTap,
child: Center(
child: Text(
_active ? 'Active' : 'Inactive',
),
),
);
}
}
複製程式碼父widget 管理 子widget 狀態
這一小節將實現一個和 Vue 的 v-model 一樣的功能，父部件管理子部件的步驟如下：
- 建立一個無狀態部件作為子部件，建構函式中需要接收狀態的值和狀態改變時的回撥函式
- 建立一個有狀態部件作為父部件，並定義需要管理的狀態
- 在父部件中建立子部件，並繫結狀態和回撥事件
import 'package:flutter/material.dart';
/// 父部件管理TapboxB的狀態
///
/// 父部件[ParentWidget]定義了[_active]狀態，並和[TapboxB]的[active]繫結
/// 當[TapboxB]被點選時，通過[onChanged]方法通知父部件，父部件修改[_active]的值
/// 也就間接修改了[TapboxB]的[active]
///
/// 如果瞭解過Vue的v-model原理的話比較好理解，其實這個和Vue的v-model一樣的
//------------------------ ParentWidget --------------------------------
class ParentWidget extends StatefulWidget {
@override
_ParentWidgetState createState() => _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,
),
);
}
}
//------------------------- TapboxB ----------------------------------
// 注意[TapboxB]是無狀態部件，所有成員變數使用 final 修飾
class TapboxB extends StatelessWidget {
// 必須傳遞onChanged，用於通知父部件
TapboxB({Key key, this.active: false, @required this.onChanged})
: super(key: key);
final bool active;
final ValueChanged<bool> onChanged;
void _handleTap() {
// 通知父部件修改 active 的值
onChanged(!active);
}
Widget build(BuildContext context) {
return GestureDetector(
// 被點選時
onTap: _handleTap,
child: Center(
child: Text(
// active 改變時修改文字的內容
active ? 'Active' : 'Inactive',
),
),
);
}
}
複製程式碼混合管理
在這種管理模式下，和父管理子部件的區別是，子部件也需要管理自己的狀態，所以子部件也將是有狀態部件（區別）。
步驟如下：
- 建立一個【有狀態部件】作為子部件，建構函式中需要接收狀態的值和狀態改變時的回撥函式
- 為子部件定義子部件內部的狀態（多的一步）
- 建立一個有狀態部件作為父部件，並定義需要管理的狀態
- 在父部件中建立子部件，並繫結狀態和回撥事件
import 'package:flutter/material.dart';
//---------------------------- ParentWidget ----------------------------
class ParentWidget extends StatefulWidget {
@override
_ParentWidgetState createState() => _ParentWidgetState();
}
class _ParentWidgetState extends State<ParentWidget> {
bool _active = false;
void _handleTapboxChanged(bool newValue) {
setState(() {
_active = newValue;
});
}
@override
Widget build(BuildContext context) {
return Container(
child: TapboxC(
active: _active,
onChanged: _handleTapboxChanged,
),
);
}
}
//----------------------------- TapboxC ------------------------------
class TapboxC extends StatefulWidget {
TapboxC({Key key, this.active: false, @required this.onChanged})
: super(key: key);
final bool active;
final ValueChanged<bool> onChanged;
_TapboxCState createState() => _TapboxCState();
}
class _TapboxCState extends State<TapboxC> {
/// [TapboxC]管理內部的邊框是否高亮，通過狀態[_highlight]來修改
bool _highlight = false;
void _handleTapDown(TapDownDetails details) {
setState(() {
_highlight = true;
});
}
void _handleTapUp(TapUpDetails details) {
setState(() {
_highlight = false;
});
}
void _handleTapCancel() {
setState(() {
_highlight = false;
});
}
void _handleTap() {
// 通知父元件
widget.onChanged(!widget.active);
}
Widget build(BuildContext context) {
return GestureDetector(
// onXXX都是事件處理
onTapDown: _handleTapDown,
onTapUp: _handleTapUp,
onTap: _handleTap,
onTapCancel: _handleTapCancel,
child: Container(
child: Center(
child: Text(widget.active ? 'Active' : 'Inactive',
style: TextStyle(fontSize: 32.0, color: Colors.white)),
),
width: 200.0,
height: 200.0,
decoration: BoxDecoration(
color: widget.active ? Colors.lightGreen[700] : Colors.grey[600],
// 邊框是否高亮顯示
border: _highlight
? Border.all(
color: Colors.teal[700],
width: 10.0,
)
: null,
),
),
);
}
}
複製程式碼