Flutter 布局参考手册：Expanded

Expanded

Expanded 可以和 Flex\Flexbox 布局一起应用，并且非常适用于分配多元素的空间。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13674.html

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

默认情况下，大多数组件都会使用尽可能小的空间：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13674.html

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

ConstrainedBox 让部件可以使用期望的剩余空间。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13674.html

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

你可以使用 BoxConstraints 指定部件可以使用多大的空间 —— 通过指定 height/width 的 min/max 属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13674.html

BoxConstraints.expand 将会让组件使用无限制（所有可用）的空间，除非另有指定：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13674.html

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

上面代码和如下代码等效：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/xcx/13674.html

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