flutter树形组件,flutter 树

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

相关问答

Q1: Flutter（5）：基础组件之Row/Column

Row：在水平方向上排列子widget的列表。

Column：在垂直方向上排列子widget的列表。

注意：这两个属于多子节点空间，可以将children排列成一行/一列，但是自身不带滚动属性，如果超出了一行，在debug下面则会显示溢出的提示。

MainAxisAlignment：主轴方向上的对齐方式，会对child的位置起作用，默认是start。

其中MainAxisAlignment枚举值：

center：将children放置在主轴的中心；

end：将children放置在主轴的末尾；

spaceAround：将主轴方向上的空白区域均分，使得children之间的空白区域相等，但是首尾child的空白区域为1/2；

spaceBetween：将主轴方向上的空白区域均分，使得children之间的空白区域相等，首尾child都靠近首尾，没有间隙；

spaceEvenly：将主轴方向上的空白区域均分，使得children之间的空白区域相等，包括首尾child；

start：将children放置在主轴的起点；

其中spaceAround、spaceBetween以及spaceEvenly的区别，就是对待首尾child的方式。其距离首尾的距离分别是空白区域的1/2、0、1。

MainAxisSize：在主轴方向占有空间的值，默认是max。

MainAxisSize的取值有两种：

max：根据传入的布局约束条件，最大化主轴方向的可用空间；

min：与max相反，是最小化主轴方向的可用空间；

CrossAxisAlignment：children在交叉轴方向的对齐方式，与MainAxisAlignment略有不同。

CrossAxisAlignment枚举值有如下几种：

baseline：在交叉轴方向，使得children的baseline对齐；

center：children在交叉轴上居中展示；

end：children在交叉轴上末尾展示；

start：children在交叉轴上起点处展示；

stretch：让children填满交叉轴方向；

TextDirection：阿拉伯语系的兼容设置，一般无需处理。

VerticalDirection：定义了children摆放顺序，默认是down。

VerticalDirection枚举值有两种：

down：从top到bottom进行布局；

up：从bottom到top进行布局。

top对应Row以及Column的话，就是左边和顶部，bottom的话，则是右边和底部。

TextBaseline：使用的TextBaseline的方式，有两种，前面已经介绍过。

这个是Row/Column的内的小控件，可以用来实现权重的布局

这边使用一个Container，里面是Row，使用Expanded对子节点进行权重处理，如果不使用Expanded，直接放入其他控件也是可以的，只是无法设置权重

对于内容过长的时候，会有溢出提示：

MainAxisAlignment.center：将children放置在主轴的中心；

MainAxisAlignment.start：将children放置在主轴的起点；

MainAxisAlignment.end：将children放置在主轴的末尾；

MainAxisAlignment.spaceAround：将主轴方向上的空白区域均分，使得children之间的空白区域相等，但是首尾child的空白区域为1/2；

MainAxisAlignment.spaceBetween：将主轴方向上的空白区域均分，使得children之间的空白区域相等，首尾child都靠近首尾，没有间隙；

MainAxisAlignment.spaceEvenly：将主轴方向上的空白区域均分，使得children之间的空白区域相等，包括首尾child；

下一章我们学习基础组件之Image

Q2: Flutter 基础组件之 Scaffold

Scaffold 是一个页面布局脚手架，实现了基本的Material布局,总所周知，大部分页面都包含了标题栏，主体内容，底部导航栏，或者侧滑栏，如果每次都需要重复写这些内容会大大影响开发效率，所以Flutter提供了Material风格的页面脚手架Scaffold，可以很方便的快速搭建基本元素，

Scaffold 继承自 StatefulWidget,是有状态的

常用属性：

appBar: 显示在界面上的标题栏

body: 页面上主题内容

floatingActionButton：浮动按钮，一般界面不一定会用到

floatingActionButtonLocation：浮动按钮的位置

floatingActionButtonAnimator：浮动按钮动画

persistentFooterButtons：固定显示在下方的按钮

drawer | endDrawer：抽屉

bottomNavigationBar：底部标题栏

bottomSheet：底部菜单