本文是 Flutter 部件內部狀態管理的小結，從部件的基礎開始，到部件的狀態管理，并且在過程中實現一個類似 Vue 的 v-model 的功能。
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; } }); }}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', ), ), ); }}這一小節將實現一個和 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, ), ), ); }}總結
以上所述是小編給大家介紹的Flutter部件內部狀態管理小結之實現Vue的v-model功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
