Flutter 布局参考手册：SizedBox组件

SizedBox

这是最简单但是最有用的部件

用作 ConstrainedBox 的 SizedBox

SizedBox 可以实现和 ConstrainedBox 相似的效果

SizedBox.expand(
  child: Card(
    child: Text('Hello World!'),
    color: Colors.yellowAccent,
  ),
),
复制代码

用作内边距的 SizedBox

如果你需要添加内边距或者外边距，你可以选择 Padding 或者 Container 部件。但是它们都不如添加 Sizedbox 简单易读

Column(
  children: <Widget>[
    Icon(Icons.star, size: 50),
    const SizedBox(height: 100),
    Icon(Icons.star, size: 50),
    Icon(Icons.star, size: 50),
  ],
),
复制代码

用作不可见对象的 SizedBox

很多时候你希望通过一个布尔值（bool）来控制组件的显示和隐藏

Widget build(BuildContext context) {
  bool isVisible = ...
  return Scaffold(
    appBar: AppBar(
      title: Text('isVisible = $isVisible'),
    ),
    body: isVisible 
      ? Icon(Icons.star, size: 150) 
      : const SizedBox(),
  );
}
复制代码

由于 SizedBox 有一个 const 构造函数，使用 const SizedBox() 就变得非常简单。

更简单的解决方案是使用 Opacity 部件，然后将 opacity 的值改成 0.0。这个方案的缺点是虽然组件不可见，但是它依旧占据空间。