SizedBox的一个非常常见的用例是在行或列内的小部件之间添加间隙。
在实践中，这常常导致代码看起来像这样。
Column(
children: const [
Text('Spacing is a good idea in UX design.'),
SizedBox(height: 16),
Text('It makes your UI less cluttered.'),
]
)
或像这样。
Row(
children: [
const Text('Image Preview:'),
const SizedBox(width: 16),
CachedNetworkImage(imageUrl: product.imageUrl),
]
)
上面的代码并没有什么问题。
然而，在需要的时候，很容易忘记const 修改器。
而且要多次输入SizedBox(height: someValue) ，有点太啰嗦了。
因此，这里有一个小提示来改善事情。
将缝隙定义为const小部件
在一个单独的文件中，我们可以将所有我们需要的SizedBoxes定义为编译时常量，使用4像素的倍数。
// gaps.dart
const gapW4 = SizedBox(width: Sizes.p4);
const gapW8 = SizedBox(width: Sizes.p8);
const gapW12 = SizedBox(width: Sizes.p12);
...
const gapW64 = SizedBox(width: Sizes.p64);
const gapH4 = SizedBox(height: Sizes.p4);
const gapH8 = SizedBox(height: Sizes.p8);
const gapH12 = SizedBox(height: Sizes.p12);
...
const gapH64 = SizedBox(height: Sizes.p64);
然后，我们可以在需要时使用它们。
// don't forget to import gaps.dart!
Column(
children: const [
Text('Spacing is a good idea in UX design.'),
gapH16,
Text('It makes your UI less cluttered.'),
]
)
Row(
children: [
const Text('Image Preview:'),
gapW16,
CachedNetworkImage(imageUrl: product.imageUrl),
]
)
再次强调：你的代码将更有表现力，因为上述所有的差距都被硬编码为编译时常量。
而且，你将有更少的打字工作要做，这总是一个不错的胜利👌
为什么是4的倍数？
如果你愿意，你可以使用8的倍数。
主要的一点是，这将使你的用户界面看起来更加一致，因为你有一套严格的值可以选择。
编码愉快!
