Flutter 中 Gap 和 SizedBox 的比较与区别

在 Flutter 中，两个小部件在控制应用设计布局尺寸和空间方面起着至关重要的作用，它们是 SizedBox 和 Gap 小部件。

在 Flutter 中构建响应式布局时，间距和大小很重要。框架提供了一些简单但功能强大的小部件来控制间距和大小，SizedBox 和 Gap。让我们来了解一下 SizedBox 和 Gap。

SizedBox

Flutter 中的 SizedBox 小部件是一个简单而多功能的小部件，它允许你显式地设置小部件的宽度和高度，从而精确控制其尺寸。

它是 Flutter SDK 中的内置小部件，类似于 Container 小部件，但属性较少。例如，以下代码将在两个小部件之间添加 10 像素高的间隙：

Column(
  children: [
    Text("Widget 1"),
    SizedBox(height: 10),
    Text("Widget 2"),
  ],
)
1
2
3
4
5
6
7

SizedBox 小部件还可用于约束子小部件的大小。例如，以下代码将使文本小部件的宽度为 100 像素：

SizedBox(
    width: 100,
    height: 100,
    child: Text(
        "Widget 1",
        style: TextStyle(fontSize: 16),
        maxLines: 2,
        overflow: TextOverflow.ellipsis,
    ),
);
1
2
3
4
5
6
7
8
9
10

Gap

Gap 小部件是 Flutter 中相对较新的补充，在 2.3.0 版本中引入。它简化了在 Flutter 的 widget 树中的 widget 之间添加空间的过程。

与需要明确指定高度或宽度的 SizedBox 和 Container 小部件不同，Gap 小部件会自动调整其大小以匹配父小部件的方向，使其使用起来更加直观和简洁。

Flutter 中 Gap 小部件的类型有哪些？

1. MaxGap 小部件

MaxGap 小部件是一个 Flutter 小部件，用于在列或行中的小部件之间添加间距。它会尝试用指定大小填充可用空间，但如果可用空间小于指定大小，则只会占用可用空间。当您希望缩小间隙以避免溢出时，这非常有用。

例如，你可以使用 MaxGap 小部件在 Row 中的两个按钮之间添加 20 像素的间距，如果 Row 不够宽，无法同时容纳两个按钮和间距，那么间距就会缩小，以便让按钮能够容纳。

Row(
  children: [	
    Text('Button 1'),
    MaxGap(20),
    Text('Button 2'),
  ],
)
1
2
3
4
5
6
7

2. SilverGap 小部件

SliverGap 是 Flutter 中的一个小部件，它在 Sliver 之间提供空间。Sliver 是一种用于创建自定义滚动效果的小部件。SliverGap 可以用于在 Sliver 之间添加垂直或水平间距，或者在 CustomScrollView 的开始或结束处创建固定数量的空间。

下面是一个示例，展示如何使用 SliverGap 在条纹之间添加垂直间距：

CustomScrollView(
  slivers: [
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return Text('Item $index');
        },
        childCount: 10,
      ),
    ),
    SliverGap(height: 32.0),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return Text('Item ${index + 10}');
        },
        childCount: 10,
      ),
    ),
  ],
)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

上面的代码创建了一个 CustomScrollView ，它有两个列表，两个列表之间有 32 像素的垂直间隔。

Gap 和 SizedBox 的关键比较和区别

Gap 和 SizedBox 都是 Flutter 中用于在小部件之间添加间距的小部件。然而，SizedBox 和 Gap 之间有一些关键的区别：

Flutter 中的 Gap 包提供了一系列小部件，可以简化在列和行等 Flex 容器以及可滚动视图中的小部件之间添加间距的过程。

SizedBox 是 Flutter SDK 中的一个内置小部件，它充当一个具有预定义大小的简单盒子，它为子小部件设置大小约束提供了灵活性，虽然其功能类似于 Container 小部件，但 SizedBox 提供了更简洁的方法，减少了属性集。

结束

在 Flutter 中，SizedBox 和 Gap 之间的选择取决于你 UI 设计的具体要求，SizedBox 提供精度和固定尺寸，适合某些场景，而 Gap 简化了创建自适应和响应式布局的过程。

通过理解这两个小部件的优势和用例，Flutter 开发人员可以优化他们的代码，以实现无缝和视觉上吸引人的用户体验。

---

原文：https://medium.com/@codetrade/comparison-and-differences-between-gap-and-sizedbox-2b8c6bac032c