flutter页面如何刷新，flutter 局部刷新ui

Flutter listview下拉刷新，上拉加载更多封装

本文在 pull_to_refresh 的基础上对刷新做了封装，可以根据刷新状态自定义想要的头和尾。

本文刷新头和尾都使用的 lottie 动画,

lottie动画可以参考

接下来就可以在需要使用list view刷新的页面使用了 如下：

效果图：

相关问答

Q1: Flutter 全局List Widget 不刷新问题

我是在StatefulWidget里面设置了一个全局的List，然后动态改变List里面的内容，然后使用setState刷新，结果发现没有用，点击一下虽然会多出一个新的Item，但是还是原来那个，就是List长度、内容不同，Widget显示的是同一个Widget。

比如：九宫格添加图片，第一个是添加图片，点击添加图片把图片放到List里面，然后setState刷新，结果发现页面没变化，触碰添加图片Item，就会多出一个添加图片Item。

根据Flutter基于不可变数据的原理，我们直接把List换一个引用，创建一个新的List。

Q2: flutter-添加下拉刷新

参考文章

全局配置RefreshConfiguration,配置子树下的所有SmartRefresher表现,一般存放于MaterialApp的根部

Q3: Flutter的setState（状态刷新）

Flutter有两个常用的状态类：

标记为dirty，执行的markNeedsBuild，定义在Element类中：

当前Element节点被标记为dirty，同时调用owner的scheduleBuildFor方法：

将element元素添加到全局的“脏”链表里。

BuildOwner用来管理哪些需要更新的Widget。这个owner最开始被初始化的地方在WidgetsBinding的initInstances方法中，随后初始化了onBuildScheduled方法，对应执行的是_handleBuildScheduled，定义在WidgetsBinding类中：

ensureVisualUpdate 方法定义在SchedulerBinding类中：

在提交下一帧绘制的时候会调用到scheduleFrame方法，提交给引擎绘制，看看scheduleFrame方法，也定义在SchedulerBinding类中：

提交给引擎绘制之后，会收到onDrawFrame的回调，最终执行到_handleDrawFrame方法中，对应的是handleDrawFrame方法，定义在SchedulerBinding类中：

在RendererBinding的initInstances方法中添加了一个回调到这个List中，对应的是RenderBinding的drawFrame方法，对应的节点进行绘制渲染操作。

WidgetsBinding中的drawFrame方法：

看看这里的buildScope方法，定义在BuildOwner方法中。在上面 scheduleBuildFor 方法介绍中有提到："scheduleBuildFor 是把一个 element 添加到 _dirtyElements 链表，以便当[WidgetsBinding.drawFrame]中调用 buildScope 的时候能够重构 element。onBuildScheduled()是一个 BuildOwner 的回调"。在 drawFrame 中调用 buildOwner.buildScope(renderViewElement)更新 elements。

_dirtyElements列表在遍历的过程中执行rebuild方法，此时将所有标记为dirty的Element节点依次执行rebuild，preformRebuild，build，updateChild，update方法，执行界面更新。完成build，update操作完成之后，后续会将需要绘制的RenderObject添加到需要layout的列表中，等待绘制渲染。所有绘制完成之后将_dirtyElments列表清空，_inDirtyList标记位置为false。

提交给引擎绘制渲染

看看super.drawFrame()，这里就执行到了RendererBinding类中，定义如下：

这里就是将最终需要绘制渲染的画面提交给引擎的地方了，绘制完成之后就在界面显示更新后的视图了。

Q4: Flutter组件（Widget）的局部刷新方式

Flutter中有两个常用的状态Widget分为StatefulWidget和StatelessWidget，分别为动态视图和静态视图，视图的更新需要调用StatefulWidget的setState方法，这会遍历调用子Widget的build方法。如果一个页面内容比较复杂时，会包含多个widget，如果直接调用setState，会遍历所有子Widget的build，这样会造成很多不必要的开销，所以非常有必要了解Flutter中局部刷新的方式：

globalkey唯一定义了某个element，它使你能够访问与element相关联的其他对象，例如buildContext、state等。应用场景：跨widget访问状态。

例如：可以通过key.currentState拿到它的状态对象，然后就可以调用其中的onPressed方法。

Flutter框架内部提供了一个非常小巧精致的组件，专门用于局部组件的刷新。适用于值改动的刷新。

实现原理：在 initState 中对传入的可监听对象进行监听，执行 _valueChanged 方法，_valueChanged 中进行了 setState 来触发当前状态的刷新。触发 build 方法，从而触发 widget.builder 回调，这样就实现了局部刷新。可以看到这里回调的 child 是组件传入的 child，所以直接使用，这就是对 child 的优化的根源。

可以看到 ValueListenableBuilder 实现局部刷新的本质，也是进行组件的抽离，让组件状态的改变框定在状态内部，并通过 builder 回调控制局部刷新，暴露给用户使用。

通过这个可以创建一个支持局部刷新的widget树，比如你可以在StatelessWidget里面刷新某个布局，但是不需要改变成StatefulWidget；也可以在StatefulWidget中使用做部分刷新而不需要刷新整个页面，这个刷新是不会调用Widget build（BuildContext context）刷新整个布局树的。

异步UI更新：

很多时候我们会依赖一些异步数据来动态更新UI，比如在打开一个页面时我们需要先从互联网上获取数据，在获取数据的过程中显示一个加载框，等获取到数据时我们再渲染页面；又比如我们想展示Stream（比如文件流、互联网数据接收流）的进度。当然StatefulWidget我们完全可以实现以上功能。但由于在实际开发中依赖异步数据更新UI的这种场景非常常见，并且当StatefulWidget中控件树较大时，更新一个属性导致整个树重建，消耗性能，因此Flutter专门提供了FutureBuilder和SteamBuilder两个组件来快速实现这种功能。

通常情况下，子Widget无法单独感知父Widget的变化，当父state变化时，通过其build重建所有子widget；

InheriteddWidget可以避免这种全局创建，实现局部子Widget更新。InheritedWidget提供了一种在Widget树中从上到下传递、共享数据的方式。Flutter SDK正是通过InheritedWidget来共享应用主题和Locale等信息。

InheritedWidgetData

TestData

InheritedTest1Page

provider是Google I/O 2019大会上宣布的现在官方推荐的管理方式，而ChangeNotifierProvider可以说是Provider的一种：

yaml文件需要引入provider: ^3.1.0

顶层嵌套ChangeNotifierProvider

创建共享数据类DataInfo：

数据类需要with ChangeNotifier 以使用 notifyListeners()函数通知监听者更新界面。

使用Provider.of(context)获取DataInfo

nextPage：

使用Consumer包住需要使用共享数据的Widget

RepaintBoundary就是重绘边界，用于重绘时独立于父视图。页面需要更新的页面结构可以用 RepaintBoundary组件嵌套,flutter 会将包含的组件独立出一层"画布"，去绘制。官方很多组件 外层也包了层 RepaintBoundary 标签。如果你的自定义view比较复杂，应该尽可能的避免重绘。

以上总结了几种Flutter的局部刷新的方式，可根据实际需要使用不同的方式，最适合的才是最好的。

关于flutter页面如何刷新和flutter 局部刷新ui的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。