'SizedBox' 颤振 - Dart

SizedBox 是一个在 Flutter 中常用的小部件，它可以提供一个固定大小的盒子。在一个布局中，一个或多个 SizedBox 能够调整布局中其它各个元素的间距和大小。

使用方式

SizedBox(
  width: 100,
  height: 100,
  child: ...
)

SizedBox 通常用在有很多元素需要排列在一行或一列的 Row 或 Column 中。

参数

width 和 height

width 和 height 定义了该盒子的最小宽度和最小高度。这两个参数的值可以是一个精确值，也可以是一个 double.infinity（相当于最大宽度或最大高度）。当某一个尺寸被设为 null 的时候，则对应的最小尺寸为 0。

// 宽度和高度为 100 像素
SizedBox(
  width: 100,
  height: 100,
  child: ...
)

// 只设置宽度，高度不设限
SizedBox(
  width: 100,
  child: ...
)

// 只设置高度，宽度不设限
SizedBox(
  height: 100,
  child: ...
)

// 宽度和高度都不设限
SizedBox(
  child: ...
)

child

SizedBox 的 child 参数是它所包含的子部件。如果没有提供 child，则 SizedBox 将不会生效。

SizedBox(
  width: 100,
  height: 100,
  child: Container(
    color: Colors.blue,
  ),
)

示例

Row(
  children: <Widget>[
    Icon(Icons.account_circle),
    SizedBox(width: 10),
    Text('Username'),
    SizedBox(height: 16),
    Icon(Icons.email),
    SizedBox(width: 10),
    Text('Email Address'),
  ],
)

上述代码创建了一个水平排列的 Row，其中每一个元素之间的间距可以通过 SizedBox 来调整。试试更改 SizedBox 的参数，看看布局的变化。

结语

这就是 SizedBox 的基本用法。通过添加一个或多个 SizedBox，我们可以很方便地调整布局中各个部件的大小和间距。