Flutter布局参考：扩展

扩展

扩展可以用Flex\Flexbox布局来实现，非常适合为多个元素分配空间。

Row(
  children: <Widget>[
    Expanded(
      child: Container(
        decoration: const BoxDecoration(color: Colors.red),
      ),
      flex: 3,
    ),
    Expanded(
      child: Container(
        decoration: const BoxDecoration(color: Colors.green),
      ),
      flex: 2,
    ),
    Expanded(
      child: Container(
        decoration: const BoxDecoration(color: Colors.blue),
      ),
      flex: 1,
    ),
  ],
),
复制代码

ConstrainedBox

默认情况下，大多数组件使用尽可能少的空间：

Card(child: const Text('Hello World!'), color: Colors.yellow)
复制代码

ConstrainedBox 允许小部件使用它想要的剩余空间。

ConstrainedBox( 
  constraints: BoxConstraints.expand(),
  child: const Card(
    child: const Text('Hello World!'), 
    color: Colors.yellow,
  ), 
),
复制代码

您可以使用函数BoxConstraints来确定小部件可以使用多少空间 - 通过设置高度/// /max 属性。

BoxConstraints.expand 允许组件使用无限的（所有可用的）空间，除非另有说明：

ConstrainedBox(
  constraints: BoxConstraints.expand(height: 300),
  child: const Card(
    child: const Text('Hello World!'), 
    color: Colors.yellow,
  ),
),
复制代码

上面的代码相当于以下代码：

ConstrainedBox(
  constraints: BoxConstraints(
    minWidth: double.infinity,
    maxWidth: double.infinity,
    minHeight: 300,
    maxHeight: 300,
  ),
  child: const Card(
    child: const Text('Hello World!'), 
    color: Colors.yellow,
  ),
),
复制代码

作者: Yuqi://juejin. im/post /5cfe0d136fb9a07efc497d7d
来源：掘金
版权属于作者。商业转载请联系作者授权。非商业转载请注明出处。