Flutter状态更新,flutter 自动更新

Flutter局部刷新方法

Flutter中Widget分为StatefulWidget和StatelessWidget，分别为动态视图和静态视图，视图的更新需要调用StatefulWidget的setState方法，这会遍历调用子Widget的build方法。当一个主页面比较复杂时，会包含多个widget，如果直接调用setState，会遍历所有子Widget的build，这是非常不必要的性能开销，有没有单独刷新指定Widget的方式呢？这个时候就要用到GlobalKey了。

一个StatefulWidget包含一个Button，一个Text，通过点击Button调用主Widget的setState方法，刷新Text，示例如下：

同样一个StatefulWidget包含一个多个Text和Button，点击Button我们只需要刷新指定的Text，通过GlobalKey的方式，实现如下：

主Widget，包含一个需要更新的TextWidget和一个不需要更新的Text

需要单独更新的Widget

传递事件的Button

这样点击Button就只会更新指定的TextWidget了，效果如下：

这只是一个简单的例子，在实际开发中为了页面刷新的高效率，模块化封装非常重要。很多情况下都只需要局部刷新，而不是重构整个视图。所以Globalkey的运用在项目中需要熟练掌握

相关问答

Q1: Flutter了解之手势

描述了屏幕上指针（触摸、鼠标、触控笔）的位置和移动。

Flutter中可以使用Listener(功能性组件)来监听原始触摸事件

例1

例2

例3

忽略PointerEvent

手势: 描述由一个或多个指针移动组成的语义动作，如拖动、缩放、双击等。

Material大多数widget已经对tap或手势做出了响应。 例如 IconButton和 FlatButton 响应单击，ListView响应滑动事件触发滚动。

用于手势识别的功能性组件，通过它可以来识别各种手势。

例（单击）

例（添加Material触摸水波效果 InkWell组件）

例（滑动关闭 Dismissable组件）

例（单击、双击、长按）

例（滑动）

例（扫动---单一方向）

例（缩放）

GestureRecognizer是一个抽象类。

一种手势的识别器对应一个GestureRecognizer的子类。

例

由于手势竞争最终只有一个胜出者，所以，当有多个手势识别器时，可能会产生冲突。

例

例

在APP中经常会需要一个广播机制，用以跨页面通知。比如一个需要登录的APP中，页面会关注用户登录或注销事件，来进行一些状态更新。

这时候，一个事件总线便会非常有用，事件总线通常实现了订阅者模式，订阅者模式包含发布者和订阅者两种角色，可以通过事件总线来触发事件和监听事件。

对于一些简单的应用，事件总线是足以满足业务需求的，如果决定使用状态管理包的话，一定要想清楚APP是否真的有必要使用它，防止“化简为繁”、过度设计。

例

在widget树中，每一个节点都可以分发通知，通知会沿着当前节点向上传递，所有父节点都可以通过NotificationListener来监听通知。

Flutter中将这种由子向父的传递通知的机制称为通知冒泡（Notification Bubbling）。

通知冒泡和用户触摸事件冒泡是相似的，但有一点不同：通知冒泡可以中止，但用户触摸事件不行。

通知冒泡和Web开发中浏览器事件冒泡原理是相似的，都是事件从出发源逐层向上传递，可以在上层节点任意位置来监听通知/事件，也可以终止冒泡过程，终止冒泡后，通知将不会再向上传递。

Flutter的UI框架实现中，除了在可滚动组件在滚动过程中会发出ScrollNotification之外，还有一些其它的通知，如SizeChangedLayoutNotification、KeepAliveNotification 、LayoutChangedNotification等，Flutter正是通过这种通知机制来使父元素可以在一些特定时机来做一些事情。

例

例

例

阻止冒泡

通知冒泡原理

Q2: Flutter （三） 状态管理

Flutter （二）布局

Flutter （三） 状态管理

Flutter （四） Map转模型

Flutter （五） 网络请求

Flutter （六） 保留界面状态

Flutter （七） 混合开发 [配置]

Flutter （八） 混合开发 [Flutter完整项目嵌入到原生]

Q3: Flutter中的StatefulWidget及其生命周期

状态可变的 widget 。

通过其类的定义能够看到 StatefulWidget 配置 StatefulElement 。

State 是 StatefulWidget 的内部逻辑与状态，由 StatefulWidget 的 createState 创建。

StatefulWidget 实例本身是不可变的， 但是 StatefulWidget 将其可变的状态，存储在与之关联的 State 对象中。

不管什么时候，只要在树中 mount 一个新的 StatefulElement ，必然需要注入一个 StatefulWidget ，注入一个 StatefulWidget 时， framework 都会调用一次 createState 方法。

其实，在 StatefulElement 构造的时候，就会调用 createState ，创建 _state 对象，（ _state 是 StatefulElement 的变量）并且在 StatefulElement 的初始化方法中为 _state 关联当前的 StatefulElement 和用以配置 StatefulElement 的 StatefulWidget 。

StatefulElement 初始化方法如下：

这意味着如果 StatefulWidget 被插入到树中的多个位置，则会有多个 State 对象分别与它们关联。

关于此类的定义如下：

描述： 重写此方法以执行初始化。

场景： 如果 State 的 build 方法依赖于本身可以改变状态的对象时。（例如 ChangeNotifier 或 Stream ，或者可以订阅并接收通知的其他对象）正确的方式是：

注意点： 此方法中不能使用 BuildContext.dependOnInheritedWidgetOfExactType 。但是此方法被调用后会立即调用 didChangeDependencies ，在 didChangeDependencies 可以使用 BuildContext.dependOnInheritedWidgetOfExactType 。

调用时机： StatefulElement ，首次插入树中时会调用此方法，在 build 方法调用之前调用。

描述： StatefulElement 通过此方法返回的 widget 并通过调用 updateChild 来更新自己。

调用时机： framework 调用此方法的几个不同的场景如下：

描述： StatefulElement 存在，并且符合 Widget.canUpdate 的情况下对 StatefulWidget 进行更新。

调用时机： 不论何时只要 StatefulElement 的配置 widget 改变的时候就会调用。

注意： didUpdateWidget 方法最终会调用 build 方法，因此在此方法中调用 setState 是多余的。如果重写此方法，请确保调用 super.didUpdateWidget(oldWidget) 。

调用时机： 当此 State 对象的依赖项（ InheritedWidget ）更改时调用。

描述： 用于开发阶段 hot reload 。

调用时机： hot reload 时调用，调用后 build 方法也将被调用。无需在此方法中做任何操作。

调用时机： 当 StatefulElement 从树中移除的时候会调用。

调用时机： 当 StatefulElement 从树中 unmount 的时候会调用。

StatefulWidget 用以配置 StatefulElement ，但在这两者之间的 State 承接了 StatefulElement 的生命周期，而 StatefulWidget 仅仅只是连接了 State 与 StatefulElement 的不可变的实例，因此 StatefulWidget 的生命周期，依赖于 StatefulElement ，而 State 却是其最简单直接的体现形式。

为了能更好的理解 StatefulWidget 的生命周期，我画了一张关于 State 、 StatefulElement 、 Component 、 Element 的关系图。

Q4: flutter项目升级2.0过程填坑记录

在此之前先推荐看大佬的: 填坑指导

iOS需要注意：

1、flutter2.0要求cocoapods 升级到1.9.0

详情看这篇博客

2、原来flutter项目中的podfile文件是旧版本的ccocoapods了，删除podfile和对应的.lock，然后flutter项目重新运行使用它自动生成的podfile文件

3、安装CocoaPods

卸载cocoapods：sudo gem uninstall cocoapods

查看cocoapods版本：pod --version

指定版本安装：

sudo gem install -n /usr/local/bin cocoapods -v 1.9.3（新MacOS系统升级）

不指定版本安装

sudo gem install -n /usr/local/bin cocoapods

说明 :老项目sdk1.17.0===升级到2.0.1,当前所有操作基于win平台

到此为止环境已经准备妥当，正式进入项目修改。

所有的插件都要适配到空安全，插件是否支持均会有对应说明Null safety,适配过程不确定版本的话，可以使用dio: any,适配完事后再在pubspec.lock文件中查看具体的版本修改过来,实在有部分插件没有支持的，参考下面

部分插件在适配空安全的版本放弃维护了，得自行更新或寻找替代，如： flutter_swiper 变为 flutter_swiper_null_safety ，插件更新后要注意项目中的用法是否需要更新

2.1.1: 以前采用的是 provide 插件共享全局数据,现在变化为 provider ，用法改变, 点击参考 ，以防文章丢失，我重复一遍：

比如:

2.1.2: dio版本升级到4.0.0最新版后，部分用法改变

2.2.1

2.2.2

解决方案:

2.2.3

解决方案:

2.2.4

解决方案:

2.2.5

解决方案:

2.2.6

解决方案:

2.2.7

解决方案:

2.2.8

解决方案: child 换为sliver

2.2.8.1

解决方案: 项目目录下: android--app-build.gradle --minSdkVersion改为:18 或者19

2.2.8.2

解决方案: 在pubspec.yarm管理里面添加:publish_to

2.2.8.3

解决方案: video_player升级后字段发生了变化，initialized字段更换为:isInitialized(_controller.value.isInitialized)

2.2.8.4

解决方案:

2.2.8.5

解决方案:

2.2.8.6

解决方案: 方案一:删除ios目录下的Podfile.lock 文件然后重新运行 pod install命令

方案二:删除ios目录下的Podfile.lock与Podfile文件 重新运行flutter run或flutter build ios

方案三:删除ios目录,重新运行 flutter create . 命令，注意有"."这个符号不要忘记

2.2.8.7

这个报错一般对应的就是下面的报错，注意看后面的报错信息，看是哪个插件报错。

解决方案: 把Podfile的版本注释打开，改为platform :ios, '9.0' 或者是更高的版本

全局替换

1.将new List() 替换为[];

2.TextField的inputFormatters:[WhitelistingTextInputFormatter.digitsOnly] 替换为[FilteringTextInputFormatter.digitsOnly]

3.TextField的inputFormatters:[WhitelistingTextInputFormatter(RegExp("[a-z|A-Z|0-9]"))]替换为FilteringTextInputFormatter.allow(RegExp("[a-z|A-Z|0-9]"))

4.Stack组件中overflow: Overflow.visible改为 clipBehavior: Clip.none；overflow: Overflow.clip改为clipBehavior:Clip.hardEdge

5.ListWheelScrollView组件中clipToSize = false改为clipBehavior: Clip.none,clipToSize = true改为 Clip.hardEdge

6.TextField中maxLengthEnforced: true改为maxLengthEnforcement:MaxLengthEnforcement.enforced

7.FlatButton、RaisedButton、OutlineButton的变化： 官方参考

颜色的属性发生了变化，由原来的Color 变为了MaterialStatePropertyColor, 这是未了解决不同状态(pressed、hovered、focused、disabled)下按钮颜色的变化

例如

8.出现如下警告

9.showSnackBar报错误

解决方案: Scaffold换为ScaffoldMessenger

10.textSelectionColor弃用

解决方案:

11.charts_flutter升级后属性报错

解决方案:

12.flutter 真机调试无法访问网络，dio报错

解决方案:

android:

ios:

问题12完整参考

Q5: Flutter 124: 日常问题小结 (三) 自定义 Dialog 二三事

    针对日常不同的需求，我们时常需要自定义 Dialog ，而小菜在尝试过程中遇到一些小问题，简单记录总结一下；

    小菜在自定义含有文本框的 Dialog 时，文本框获取焦点时，软键盘会部分遮挡对话框，但当小菜替换为 AlertDialog 时，文本框获取焦点时，对话框会向上浮动，避免软键盘遮挡；

    对于含有文本框的自定义 Dialog ，小菜在最外层使用的是 Material 嵌套，小菜通过采用 Scaffold 来嵌套处理，默认 Scaffold 中 resizeToAvoidBottomPadding / resizeToAvoidBottomInset 为 true ，当设置为 false 时，文本框获取焦点时，依旧会被软键盘遮挡；因为在固定情景可以配合 resizeToAvoidBottomPadding 实现是否被软键盘遮挡效果；

     resizeToAvoidBottomPadding 主要用于自身 Widget 是否避免被其他窗口遮挡；其中小菜查资料介绍在 Flutter 1.1.9 之后更推荐使用 resizeToAvoidBottomInset ；

    小菜自定义一个可以多选 item 的 Dialog ，但 Dialog 中并没有状态更新的 State ，如何进行 Dialog 中状态更新呢？

    小菜之前在 showDialog 时直接创建了 TypeListDialog ，此时是无状态的，当 WidgetBuilder 创建一个 StatefulBuilder 有状态的构造器即可，可以将 state 传递到 Dialog 中；

    小菜在自定义 Dialog 时如何在一个回调方法中传递多个参数？

    小菜在 Dialog 的回调方法中传递两个 List ，而在接收回调方法中匹配两个参数即可；小菜简单看作是一个函数方法；

    小菜在重写 AppBar 时，如何取消默认的返回按钮？

    取消 AppBar 前面的返回图标有多种方式；

     自定义 Dialog 案例源码

    小菜对于 Flutter 的应用还不够熟悉，很多常用的场景会处理的很不到位，小菜会对日常的小问题进行简单记录，逐步学习；如有错误，请多多指导！