Flutter 控件LayoutBuilder的实际使用

Builds a widget tree that can depend on the parent widget's size.

项目中使用Slidable控件实现了列表item的左右滑动，一个需求要求点击item触发滑动，这时，需要获取到SlidableController对象，来实现对slidable item的操作，查看源码可知，SlidableController的获取是通过SlidableController? of(BuildContext context)获取到的，这里需要传入一个context对象，但当传入page的context，却发现无效，of返回的是null，这时根据github上的issue提示，需要使用Slideable内部的context才可以，但无法修改源码，也没有暴露抛出context。

这时，LayoutBuilder就发挥作用了。

    return Slidable(
      endActionPane: ActionPane(
        extentRatio: 0.5,
        motion: const ScrollMotion(),
        children: childrenSlideButtons,
      ),
      child: LayoutBuilder(builder: (contextFromLayoutBuilder, BoxConstraints constraints) {
        return _buildForground(contextFromLayoutBuilder);
      }),
    );

可以看到，当构建Slidable child时，使用LayoutBuilder包裹，会抛出context、constraints两个对象，这里的context就是我们需要的context，这时，通过SlidableController? of(BuildContext context)即可获取到SlidableController对象。

LayoutBuilder还有一个参数constraints，这个参数是获取当前组件的大小，来处理一些特定逻辑，通过LayoutBuilder组件可以获取父组件的约束尺寸，示例：

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: const Text('LayoutBuilder Example')),
    body: LayoutBuilder(
       builder: (BuildContext context, BoxConstraints constraints) {
       if (constraints.maxWidth > 600) {
           return _buildWideContainers();
        } else {
           return _buildNormalContainer();
        }
      },
     ),
  );
}