Flutter部件内部状态管理小结之实现Vue的v-model功能

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; } }); }}