Question

我有一个Container，其高度基于其父级，而其高度为Expanded，其挠度为2。我需要高度和宽度相同。我不想创建固定宽度，例如width: 100.0。是否可以使宽度与Container内的Expanded的高度匹配？

Answer 1

为此，您必须使用LayoutBuilder，这是最小的代码：

Column(
  children: <Widget>[
    Expanded(
      flex: 2,
      child: LayoutBuilder(
        builder: (_, constraints) {
          return Container(
            color: Colors.blue,
            width: constraints.maxHeight, // width is made equal to height
          );
        },
      ),
    ),
    Expanded(
      flex: 9,
      child: Container(color: Colors.orange),
    ),
  ],
)

编辑：正如@pskink和其他提到的，您也可以使用AspectRatio

AspectRatio(
  aspectRatio: 1,
  child: Container(color: Colors.blue),
)

Answer 2

纵横比将起作用

AspectRatio(
       aspectRatio: 1,
       child: Container(
         color: Colors.red,
       ),
     )

如何使容器的宽度与其高度匹配

2 个答案: