Flutter状态管理初探
2020-06-11 04:20
141 查看
前言
最近基于想实现一个个人常用功能集合的APP了解到了跨平台方案。进而开始了对Flutter的学习,通过文章记录一下学习中的收获。
本篇文章的主要内容是对Flutter中状态管理的方式及不同方式的选择进行介绍。
本文首发于我的个人博客技术公馆(wcc.im):Flutter状态管理初探
目录
状态管理的方式
常见的状态管理方式有三种,分别是由Widget自身进行管理,由父Widget进行管理和由Widget自身及父Widget混合进行管理。
在对三种常见的状态管理方式进行分析时,我们定义了3个Tapbox,每个Tapbox可表示激活与未激活。这样Tapbox就是一个有状态的Widget。
由Widget自身进行管理
//------------------------- TapboxA ---------------------------------- class TapboxA extends StatefulWidget { TapboxA({Key key}) : super(key: key); @override _TapboxAState createState() => _TapboxAState(); } class _TapboxAState extends State<TapboxA> { bool _active = false; void _handleTap() { setState(() { _active = !_active; }); } Widget build(BuildContext context) { return GestureDetector( onTap: _handleTap, child: Container( child: Center( child: Text( _active ? 'Active' : 'Inactive', style: TextStyle(fontSize: 32.0, color: Colors.white), ), ), width: 200.0, height: 200.0, decoration: BoxDecoration( color: _active ? Colors.lightGreen[700] : Colors.grey[600], ), ), ); } }
由Widget自身进行状态管理非常简单,由TapboxA的状态类进行状态管理。使用
_active来决定当前值与颜色并且使用
_handleTap来改变其值。
由父Widget进行管理
//------------------------ 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 ---------------------------------- class TapboxB extends StatelessWidget { TapboxB({Key key, this.active: false, @required this.onChanged}) : super(key: key); final bool active; final ValueChanged<bool> onChanged; void _handleTap() { onChanged(!active); } Widget build(BuildContext context) { return GestureDetector( onTap: _handleTap, child: Container( child: Center( child: Text( active ? 'Active' : 'Inactive', style: TextStyle(fontSize: 32.0, color: Colors.white), ), ), width: 200.0, height: 200.0, decoration: BoxDecoration( color: active ? Colors.lightGreen[700] : Colors.grey[600], ), ), ); } }
由父Widget进行管理主要有:
-
父Widget管理TapboxB的
_active
状态。 -
父Widget的状态类中实现
_handleTapboxChanged()
。
而子Widget主要的特点则是:
- 继承
StatelessWidget
类,因为其状态由父Widget进行管理。 - 被点击时通知父Widget而不是自己进行状态管理。
由Widget自身及父Widget混合进行管理
//---------------------------- 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> { 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) { // This example adds a green border on tap down. // On tap up, the square changes to the opposite state. return GestureDetector( onTapDown: _handleTapDown, // Handle the tap events in the order that onTapUp: _handleTapUp, // they occur: down, up, tap, cancel 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, ), ), ); } }
可以看到这种模式只是将前两种模式进行结合。在示例中,通过
_highlight增加了在Tapbox边缘增加边框的状态,该状态由Widget自身进行管理,而
_active状态则由父Widget进行管理。
状态管理方式的选择
状态管理方式的选择总的来说通过以下方式:
-
如果所讨论的状态是用户数据,例如复选框的选中或未选中模式,或滑块的位置,则最好由父Widget来管理状态。
-
如果所讨论的状态是动画等状态,则最好由Widget本身来管理状态。
本文首发于我的个人博客技术公馆(wcc.im)。
原文链接:https://wcc.im/zh/post/flutter-state-management/
本博客内文章除特别声明外均为原创,采用CC BY-NC-SA 4.0 许可协议进行许可。超出CC BY-NC-SA 4.0 许可协议的使用请联系作者获得授权。
相关文章推荐
- Flutter部件内部状态管理小结之实现Vue的v-model功能
- Flutter 状态管理之Redux
- Flutter 布局Layout,富文本与状态管理State
- 为了弄懂Flutter的状态管理, 我用10种方法改造了counter app
- react初探(一)之JSX、状态(state)管理、条件渲染、事件处理
- Flutter完整开发实战详解(十二、全面深入理解状态管理设计)
- flutter 全局状态管理 包
- flutter 全局状态管理 包
- React第三方组件4(状态管理之Reflux的使用③TodoList中)
- React第三方组件4(状态管理之Reflux的使用④TodoList下)
- ASP.NET状态管理之一(概括篇)
- Vue技术栈开发实战(四)-------------状态管理bus的使用
- Flutter插件开发-电池电量管理插件示例
- ASP.NET创建Web服务之管理Web服务状态
- SharePoint初探-定义管理路径(5)
- linux系统日常管理----监控系统的状态(三)
- ASP.NET系统对象与状态管理
- 第二章 进程管理(1)——进程的特征与状态
- Taro 小程序开发大型实战(五):使用 Hooks 版的 Redux 实现应用状态管理(下篇)
- vuex状态管理