【布局 widget】Flutter LayoutBuilder

LayoutBuilder 介绍

与 Builder widget 类似，不同的是框架在布局时调用 LayoutBuilder 的 builder 函数并提供 parent widget 的约束。如果 parent 不依赖于 child intrinsic size，child 可以根据 LayoutBuilder 传过来的 constrains 灵活决定自己的大小。最终 LayoutBuilder 的尺寸 和 child 一样大。

使用 LayoutBuilder

LayoutBuilder 的应用场景有两个

1. 根据 constrains 来做响应式布局。

 LayoutBuilder(builder: (context, constrains) {
      return Row(
        children: [
          Container(color: Colors.green,width: 150,height: 100,),
          if(constrains.maxWidth>200)
            Container(color: Colors.blue,width:150,height: 100 ,
        )
        ],
      );

  });

在本例中，当 宽度小于 200 时，只有 绿色块，当宽度大于 200 时除了绿色块还会显示蓝色块。

1. 开发时获取 constrains 信息，方便调试。

比如我们想知道 Row 下面的 绿色块的约束信息。

 Row(
        children: [Container(color: Colors.green)],
    )

可以加上 LayoutBuilder 把约束信息打印出来。

return Row(
        children: [
          LayoutBuilder(builder:((context, constains) {
            print(constrains);
            return Container(color: Colors.green,);
          }))
        ],
      );

拿到约束信息就可以方便的排查问题了。

今天就到这里了，谢谢观看。