flutter小技巧01-为了获得更好的性能，请将SizedBox替换为编译时常数

SizedBox 的一个非常常见的使用场景是在 Row 或 Column 里添加小部件之间的间隔。

在实践中，经常会把代码写成像下面这样：

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:某些值)稍微有一点多余。

所以这里有一些小的建议

将间隔定义为 const 小部件

在一个单独的文件中，我们可以将所需的所有 SizedBox 定义为编译时常量，使用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);

然后，我们就能在想用的地方用它。

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像素。

主要的目的是让您的UI看上去更加的统一。

祝你们编程愉快。