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
