本文是 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功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对亿速云网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。