如何根据父级的大小布局小部件？

假设您有一个可能具有可变大小的父窗口小部件.

例如:

var container = new Container(
   height: 200.0, // Imagine this might change
   width: 200.0, // Imagine this might change
   // Imagine content in this container will 
   // depend on the parent container
   child: new Container(), 
);

也许你想让父容器的子进程根据它给出的大小来呈现不同的东西.

想想响应式设计断点,如果宽度超过X则使用此布局,如果宽度在X下使用该布局.

在Flutter中做到这一点的最佳方法是什么？

您将需要使用LayoutBuilder小部件,该小部件将在布局时构建并提供父小部件的约束.

的LayoutBuilder在需要build()其具有标准功能BuildContext与沿BoxConstraints作为参数,可以用来帮助动态地呈现基于尺寸的小部件.

让我们构建一个小部件的简单示例,如果父宽度大于200px,则呈现"LARGE";如果父宽度小于或等于父宽度,则呈现"SMALL".

var container = new Container(
  // Toggling width from 100 to 300 will change what is rendered
  // in the child container
  width: 100.0,
  // width: 300.0
  child: new LayoutBuilder(
    builder: (BuildContext context, BoxConstraints constraints) {
      if(constraints.maxWidth > 200.0) {
        return new Text('BIG');
      } else {
        return new Text('SMALL');
      }
    }
  ),
);