Flutter（69）：Builder、LayoutBuilder、StatefulBuilder、SliverLayoutBuilder

Flutter教学目录持续更新中

Github源代码持续更新中

1.介绍

• Builder：创建一个widget树
• LayoutBuilder：构建一个可以依赖父窗口大小的widget树
• StatefulBuilder：创建一个支持局部更新的widget树
• SliverLayoutBuilder：创建一个支持折叠的widget树

当然还有FutureBuilder、StreamBuilder，这些是用来异步更新UI的，这个以后介绍。

2. Builder

这个我们之前用过，在讲BottomSheet，Dialog，SnackBar的时候都用到过。

3. LayoutBuilder

这个就是可以返回所依赖布局的约束

  _myLayoutBuilder() {
    return LayoutBuilder(
        builder: (BuildContext context, BoxConstraints constraints) {
      print('constraints = $constraints');
      return Container(
        width: 50,
        height: 50,
        color: Colors.red,
      );
    });
  }

4.StatefulBuilder

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

  _myStatefulBuilder() {
    var _color = Colors.green;
    return StatefulBuilder(
        builder: (BuildContext context, StateSetter setState) {
      return Container(
        width: 50,
        height: 50,
        color: _color,
        child: InkWell(
          onTap: () {
            setState(() {
              ToastUtil.showToast('onTap');
              _color = _color == Colors.amber ? Colors.green : Colors.amber;
            });
          },
        ),
      );
    });
  }

image.png

5.SliverLayoutBuilder

创建一个支持折叠的widget树。（说到这个之前说Sliver组件后面讲给忘了，稍后补上）

  _mySliverLayoutBuilder() {
    var _color = Colors.green;
    return CustomScrollView(
      physics: BouncingScrollPhysics(),
      slivers: [
        SliverLayoutBuilder(
            builder: (BuildContext context, SliverConstraints constraints) {
          print('SliverConstraints  = $constraints');
          if (constraints.userScrollDirection == ScrollDirection.forward) {
            _color = Colors.blue;
          } else if (constraints.userScrollDirection == ScrollDirection.idle) {
            _color = Colors.green;
          } else {
            _color = Colors.cyan;
          }

          return SliverToBoxAdapter(
            child: Container(
              height: 100,
              color: _color,
            ),
          );
        }),
        SliverList(
            delegate:
                SliverChildBuilderDelegate((BuildContext context, int index) {
          return Card(
            child: Container(
              height: 50,
              color: Colors.primaries[(index % 18)],
            ),
          );
        }, childCount: 80)),
      ],
    );
  }

ScrollDirection.reverse.png

ScrollDirection.idle.png

ScrollDirection.forward.png

下一节：Sliver组件之CustomScrollView

Flutter（70）：Sliver组件之CustomScrollView

Flutter教学目录持续更新中

Github源代码持续更新中