flutter刷新ui,flutter刷新view的方法

Flutter局部刷新

setState会刷新整个页面，在只需要刷新部分组件的时候可以用StatefulBuilder

先给需要局部刷新的组件创建一个StateSetter

需要刷新的组件用StatefulBuilder包裹，绑定_stateSetter

然后在需要刷新的时候调用

相关问答

Q1: Flutter-Cupertino风格UI-CupertinoTab

实例中有3个Tab标签Home, School,Self;在School页面添加功能跳转到Home.

需要注意的地方:

没有的话再次设置selectedIndex不会刷新UI，是一个比较特殊的地方.

Q2: 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的局部刷新的方式，可根据实际需要使用不同的方式，最适合的才是最好的。

Q3: 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的运用在项目中需要熟练掌握

Q4: flutter刷新页面的方法

这种方法最常见，但是有些地方引用的话，刷新的成本比较大，刷新的是整个页面，数据太多加载太慢的话，会有闪烁的现象

这种方法类似于iOS中的set方法，通过设置某个属性的时候，去刷新某个控件。在flutter中这种刷新方式，是对上面setState(){}方法的改进，根本的方法还是setState(){}，只不过是通过方法去刷新某个控件。如下：

首先在pubspec.yaml中添加provider依赖

下面通过provider来实现一个发送验证码的案例。

创建一个TimerModel文件

页面布局如下：