SizedBox 可以强制它的子部件有一个固定的尺寸 .. 也就是一个固定的宽度还有高度 .. 如果不设置这个尺寸的话 .. 它的大小应该就是它里面包装的子部件的大小 ..

在这个 Column 里面 .. 暂时去掉 crossAxisAlignment .. 再把 mainAxisAlignment 设置成 center ..

然后在这个 Column 的子部件这里 .. 添加一个 SizedBox ... 暂时先不设置它的尺寸 .. 里面添加一个 child .. 包装的是一个 Container .. 给它添加一个 decoration ，来点装饰 .. 值是个 BoxDecoration .. 里面添加一个 color 设置一下颜色 .. 颜色用 Color.fromRGBO 这个方法 .. 再设置一下颜色的 RGBO 的值 ..

然后再添加一个 borderRadius ... 圆角效果 .. BorderRadius.circular .. 大小是 8.0 ..

这个 Container 的 child 是一个 Icon .. 设置一下要显示的小图标 .. Icons.ac_unit .. 用 color 设置一下图标的颜色 .. 使用白色 .. 再添加一个 size 设置一下图标的大小 .. 32.0

现在界面上会显示一个蓝色背景的小图标 . 它的尺寸就是这个小图标的尺寸 ..

我们在给 SizedBox 添加一个 width 属性，设置一下它的宽度 .. 比如 200.0 ... 再给它一个 height .. 设置一下高度 .. 大小是 300.0 ..

你会发现，现在，被这个 SizedBox 包装的 Container 的尺寸就会是我们给 SizedBox 设置的尺寸了 ..

平时我们可以单独使用这个 SizedBox ，不用给它设置子部件 .. 这样可以用它作为界面上的间隔 .. 复制一份这个 SizedBox .. 修改一个它的大小 .. 宽度还有高度都改成 100 . 这个小图标也可以改一下 .. 用一个 brightness_2 ..

现在这两个 SizedBox 会连接到一块儿 .. 在它们之间添加点间隔 .. 可以再用一个 SizedBox ... 这里只需要设置一下它的 height 就行了 .. 大小是 32.0 ..

这样会在这两个卡片之间留出一个 32 大小的间隔 ..