Flutter | 关于状态管理,别再被吓着了

简介: 本篇是带大家了解并明白 Flutter 中状态管理相关,着眼与实际应用与通俗(说人话)解释,杜绝概念连篇 ❎ 。

导航

本篇是带大家了解并明白 Flutter状态管理相关,着眼与实际应用与通俗(说人话)解释,杜绝概念连篇 ❎ 。

概述

响应式的编程框架中总会有一个永恒的主题–”状态管理“,无论是 React/Vue(前端开发同学肯定了解),还是 Flutter,为了便于共享组件之间的状态,便于在特定时候干特定操作,都会遵循一些特定的约束,而这个约束的过程我们称它为状态管理。

注意,这里的widget或者组件可以理解为Android中的View.

对于一个组件,我们可能有好多种响应状态,比如手势的按下时,手势放开时,这些不同的状态下,我们的组件可能会做出一些改变,而作为开发者我们怎么知道它们改变了呢?就是定义一些状态变量去判断,而这些状态变量是由当前 widget 自己持有并管理好呢,还是自己只是做一个接收判断,具体还是由父 Widget ( Android 开发者你可以理解为调用者传递进来)管理呢,具体都是根据实际情况而定。而上述的这个过程我们就可以称之为 状态管理。

Flutter的状态管理

Flutter 中,我们都知道 StatefuleWidget 对应可变组件,那么相应的,它的一些状态应该被谁管理?Widget本身?父Widget?还是都行呢?

最佳解决方式是:

根据实际情况而定。

你可以认为这就是状态管理的基本宗旨,在知道宗旨情况下,我们下面来看看 Flutter 究竟如何管理。

常见的状态管理方式

  • Widget 管理自己的状态
  • Widget 管理子 Widget 的状态
  • 混合管理(子 Widget 和父 Widget 都管理状态)

如何决定使用哪种管理方法,下面是官方给出的一些原则以便更准确的做出选择:

  • 如果状态是用户数据,如复选框的选中状态,滑块的位置,则该状态最好是由父Widget管理;
  • 如果状态是有关界面外观效果的,例如颜色、动画,那么状态最好是由Widget本身来管理;
  • 如果某一个状态是不同 Widget 共享的则最好是由他们共同的父Widget管理。

往往在Widget内部管理状态封装性会比较好,而在父 Widget 中管理会比较灵活,有些时候,如果不确定到底该怎么去管理,那么推荐的首选是在 父widget中管理会显得更为灵活。

实践环节

1. widget自己管理自己

比如我们有如下一个示例,当我们点击屏幕时,相应的小方块改变颜色和内容, 因为要做到屏幕任意位置点击都可以触发,所以我们选用 GestureDetector 手势管理组件。


在这个示例中,我们没有太多操作,就是单纯改变文字显示与颜色,所以对于如何显示的这个判断,我们很简单就会定义一个变量,然后在相应的状态下执行相应不同的处理方式即可。

你可能会有疑问,为什么这么麻烦,的确好像看起来麻烦,我们在Android开发中,通常会直接更新view,相应的,在Flutter中,我们更新一个 Widget ,只需要 setState,然后我们的 Widget 会重新构建,如果以一个 Android 开发的思想,我们将这个状态变量提出来,你会发现你和 Flutter 好像做的也并无区别,但为什么 Flutter 的这种写法反而更为简洁呢.

请记住,Flutter 中的 **Stateful **与 Stateless Widget 区分为,有状态信息与无状态信息的两个 widget , 对于一个组件(StateFul)而言,它的不同状态决定了它 最终 的显示,而在 Android 上,这个所谓的状态仅仅只是影响了view当前 的一个显示。


具体示例如下:


动画 代码
网络异常,图片无法展示
|
网络异常,图片无法展示
|

2. 父Widget管理子Widget状态

有些时候,可能某个widget状态 需要在父 widget 地方也用到时,这个时候就可以通过下述方式来实现,即间接的通过父 widget 管理了我们子 widget 的状态。


示例如下:


动画 代码
网络异常,图片无法展示
|
网络异常,图片无法展示
|

3. 混合管理

有些情况下,我们可能会配合使用,比如下面示例中,手指按下时,我们屏幕中间小方块周围出现一个深红色边框,抬起时,边框消失,点击完成后,方块的颜色改变。

我们在父 Widget 管理红色边框是否显示,在子Widget控制小方块的颜色改变。

具体示例如下:

动画效果 父Widget 子Widget


目录
相关文章
|
1月前
|
存储 JavaScript 前端开发
盘点主流 Flutter 状态管理库2024
状态管理是每个应用不可缺少的,本文将会盘点下主流的状态管理包。
206 2
盘点主流 Flutter 状态管理库2024
|
8月前
|
Dart Android开发 UED
带你读《深入浅出Dart》二十七、Flutter路由管理
带你读《深入浅出Dart》二十七、Flutter路由管理
100 0
|
9月前
|
存储 数据库 索引
Flutter笔记:滚动之-无限滚动与动态加载的实现(GetX简单状态管理版)
本文介绍Flutter中如何实无线滚动(基于GetX简单状态管理而非有状态组件)
87 0
|
1月前
|
存储 JavaScript 前端开发
【Flutter 前端技术开发专栏】Flutter 中的状态管理框架(如 Provider、Redux 等)
【4月更文挑战第30天】本文探讨了 Flutter 开发中的状态管理,重点介绍了 Provider 和 Redux 两种框架。Provider 以其简单易用性适合初学者和小项目,而 Redux 则适用于大型复杂应用,保证状态一致性。此外,还提到了 Riverpod 和 BLoC 等其他框架。选择框架时要考虑项目规模、团队技术水平和个人偏好。文章通过购物车应用示例展示了不同框架的使用,并展望了状态管理框架的未来发展。
【Flutter 前端技术开发专栏】Flutter 中的状态管理框架(如 Provider、Redux 等)
|
1月前
|
JavaScript 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
【4月更文挑战第30天】本文探讨了Flutter的Widget和状态管理。Widget是Flutter构建UI的基础,分为有状态和无状态两种。状态管理确保UI随应用状态变化更新,影响应用性能和可维护性。文章介绍了`setState`、`Provider`、`Riverpod`、`Bloc`和`Redux`等状态管理方法,并通过计数器应用展示了其实现。选择合适的状态管理策略对高效开发至关重要。
【Flutter前端技术开发专栏】Flutter中的Widget与状态管理
|
1月前
|
存储 UED 开发者
Flutter的状态管理:setState、Provider、Bloc的使用详解
【4月更文挑战第26天】Flutter状态管理详解:涵盖setState基础,Provider的跨组件共享及Bloc的复杂场景处理。了解这三种方法的优缺点,助力优化应用数据一致性与用户体验。当状态管理需求升级,从简单的setState到Provider的便利,再到Bloc的强大功能,开发者可根据项目规模和复杂度选择合适策略。
|
1月前
|
Dart IDE API
Flutter Riverpod 状态管理上手技巧分享
时代在进步 Riverpod 作为一个优秀的状态管理,猫哥也开始做些技术调研。今天会写两个例子,计数器、拉取数据。
Flutter Riverpod 状态管理上手技巧分享
|
1月前
|
Dart
Flutter状态管理:RxDart,详细介绍
Flutter状态管理:RxDart,详细介绍 RxDart是一个基于Dart语言的响应式编程库,它提供了一套用于处理异步事件序列的工具。在Flutter应用中,RxDart可以很好地用于管理应用状态。
159 0
|
1月前
|
存储 前端开发
Flutter Provider状态管理---MVVM架构实战
Flutter Provider状态管理—MVVM架构实战 在Flutter中,状态管理是一个非常重要的概念。Flutter Provider是一种状态管理的解决方案,它提供了一种简单,灵活和高效的方法来管理Flutter应用程序中的状态。本文将详细介绍Flutter Provider的使用,以及如何在MVVM架构中使用它。
236 0
|
1月前
|
Linux 开发者 iOS开发
Flutter笔记:桌面端应用多窗口管理方案
Flutter笔记:桌面端应用多窗口管理方案
237 0