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, ), ), ); }}
总结
以上所述是小编给大家介绍的Flutter部件内部状态管理小结之实现Vue的v-model功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
