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

2023-08-22 10:17:04 333

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';

classStateLessDemoWidgetextendsStatelessWidget{
///如果定义非final修饰的成员变量，会提示
///Thisclass(oraclasswhichthisclassinheritsfrom)ismarkedas'@immutable',butoneormoreofitsinstancefieldsarenotfinal:StateLessDemoWidget.listInde
///int[listIndex];
@override
Widgetbuild(BuildContextcontext){
returnContainer();
}
}

有状态widget

有状态则是指该widget内部的成员变量可以不使用 final修饰符，并通过 setState()方法改变成员变量的值时，引起widget的状态改变并重绘（例如文本框绑定变量A，通过改变变量A修改文本框的值，这里的变量A可以理解为可变状态）

有状态widget通过实现 StatefulWidget和 State两个子类实现，步骤如下：

创建一个 Widget类，继承 StatefulWidget
创建一个继承 State的类
在 State类里创建状态（成员变量），和实现 build方法（画界面）

import'package:flutter/material.dart';

///创建一个继承[StatefulWidget]的widget类
///这个类的效果类似收藏，有个空心的爱心图标
///点击一下爱心填充红色，再点击一次就取消填充
classFavoriteWidgetextendsStatefulWidget{
@override
_FavoriteWidgetStatecreateState()=>_FavoriteWidgetState();
}

///[State]类，FavoriteWidget的具体实现
///包含一个状态[_isFavorited]
class_FavoriteWidgetStateextendsState{
bool_isFavorited=true;

@override
Widgetbuild(BuildContextcontext){
returnRow(
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';

classTapboxAextendsStatefulWidget{
@override
_TapboxAStatecreateState()=>_TapboxAState();
}
///[TapboxA]拥有状态[_active]，通过[_handleTap]方法管理[_active]
class_TapboxAStateextendsState{
bool_active=false;

void_handleTap(){
setState((){
_active=!_active;
});
}
Widgetbuild(BuildContextcontext){
returnGestureDetector(
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--------------------------------

classParentWidgetextendsStatefulWidget{
@override
_ParentWidgetStatecreateState()=>_ParentWidgetState();
}

class_ParentWidgetStateextendsState{
bool_active=false;

void_handleTapboxChanged(boolnewValue){
setState((){
_active=newValue;
});
}

@override
Widgetbuild(BuildContextcontext){
returnContainer(
child:TapboxB(
active:_active,
onChanged:_handleTapboxChanged,
),
);
}
}

//-------------------------TapboxB----------------------------------

//注意[TapboxB]是无状态部件，所有成员变量使用final修饰
classTapboxBextendsStatelessWidget{
//必须传递onChanged，用于通知父部件
TapboxB({Keykey,this.active:false,@requiredthis.onChanged})
:super(key:key);
finalboolactive;
finalValueChangedonChanged;

void_handleTap(){
//通知父部件修改active的值
onChanged(!active);
}

Widgetbuild(BuildContextcontext){
returnGestureDetector(
//被点击时
onTap:_handleTap,
child:Center(
child:Text(
//active改变时修改文本的内容
active?'Active':'Inactive',
),
),
);
}
}

混合管理

在这种管理模式下，和父管理子部件的区别是，子部件也需要管理自己的状态，所以子部件也将是有状态部件（区别）。

步骤如下：

创建一个【有状态部件】作为子部件，构造函数中需要接收状态的值和状态改变时的回调函数
为子部件定义子部件内部的状态（多的一步）
创建一个有状态部件作为父部件，并定义需要管理的状态
在父部件中创建子部件，并绑定状态和回调事件

import'package:flutter/material.dart';
//----------------------------ParentWidget----------------------------

classParentWidgetextendsStatefulWidget{
@override
_ParentWidgetStatecreateState()=>_ParentWidgetState();
}

class_ParentWidgetStateextendsState{
bool_active=false;

void_handleTapboxChanged(boolnewValue){
setState((){
_active=newValue;
});
}

@override
Widgetbuild(BuildContextcontext){
returnContainer(
child:TapboxC(
active:_active,
onChanged:_handleTapboxChanged,
),
);
}
}

//-----------------------------TapboxC------------------------------
classTapboxCextendsStatefulWidget{
TapboxC({Keykey,this.active:false,@requiredthis.onChanged})
:super(key:key);

finalboolactive;
finalValueChangedonChanged;

_TapboxCStatecreateState()=>_TapboxCState();
}

class_TapboxCStateextendsState{
///[TapboxC]管理内部的边框是否高亮，通过状态[_highlight]来修改
bool_highlight=false;

void_handleTapDown(TapDownDetailsdetails){
setState((){
_highlight=true;
});
}

void_handleTapUp(TapUpDetailsdetails){
setState((){
_highlight=false;
});
}

void_handleTapCancel(){
setState((){
_highlight=false;
});
}

void_handleTap(){
//通知父组件
widget.onChanged(!widget.active);
}

Widgetbuild(BuildContextcontext){
returnGestureDetector(
//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功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

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