作者：mclasen

基线

我们正在进入 GTK+ 尺寸分配的另一个更为神秘的领域。基线将窗口小部件从简单的具有宽度和高度的盒子模型转变为窗口小部件可以在垂直方向以更有趣的方式对齐的模型。这主要是在文本方面起作用。当您沿着一行文本移动时，读者的眼睛对单词的上下移动非常敏感。基线的作用就是避免这种情况。

由于这涉及子元素彼此之间的垂直对齐，因此只有当容器处于水平方向时，基线才相关。

测量上方和下方

由于子元素现在可以具有“强制”对齐方式，因此仅采用子元素高度的最大值不再足够。对齐可能会导致子元素在顶部或底部“突出”，从而需要更大的整体高度。为了处理这种情况，我们分别测量“基线上方”的部分和“基线下方”的部分，并分别最大化它们。

for (i = 0; i < 3; i++) {
  gtk_widget_measure (child[i],
                      orientation,
                      sizes[i].minimum_size,
                      &child_min, &child_nat,
                      &child_min_baseline, &child_nat_baseline);

   below_min = MAX (below_min, child_min - child_min_baseline);
   above_min = MAX (above_min, child_min_baseline);
   below_nat = MAX (below_nat, child_nat - child_nat_baseline);
   above_nat = MAX (above_nat, child_nat_baseline);
}

total_min = above_min + below_min;
total_nat = above_nat + below_nat;

这段代码省略了一些细节，例如处理不返回基线的子元素。

在基线上分配

在分配方面，有两种情况：要么我们被赋予一个必须将子元素对齐到的基线，要么我们必须自己确定一个基线。在后一种情况下，我们需要做的基本上与我们已经为测量所做的工作相同：分别确定下方和上方的大小，并使用它们来找到我们的基线

for (i = 0; i < 3; i++) {
  if (gtk_widget_get_valign (child[i]) != GTK_ALIGN_BASELINE)
    continue;

  gtk_widget_measure (child[i],
                      GTK_ORIENTATION_VERTICAL,
                      child_size[i],
                      &child_min, &child_nat,
                      &child_min_baseline, &child_nat_baseline);

  below_min = MAX (below_min, child_min - child_min_baseline);
  below_nat = MAX (below_nat, child_nat - child_nat_baseline);
  above_min = MAX (above_min, child_min_baseline);
  above_nat = MAX (above_nat, child_nat_baseline);
}

当涉及到确定基线时，我们再次需要做出选择。当可用空间大于最小值时，我们将基线尽可能地放置在高处，还是尽可能地放置在低处，还是放置在中间的某个位置？GtkBox 有一个 ::baseline-position 属性，将此选择留给用户，我们在这里也这样做。

switch (baseline_position) {
  case GTK_BASELINE_POSITION_TOP:
    baseline = above_min;
    break;
  case GTK_BASELINE_POSITION_CENTER:
    baseline = above_min + (height - (above_min + below_min)) / 2;
    break;
  case GTK_BASELINE_POSITION_BOTTOM:
    baseline = height - below_min;
    break;
}

总结

我们 GTK+ 的尺寸分配机制之旅到此结束。我希望你喜欢它。

参考资料

1. 容器的秘密：尺寸分配
2. 容器的秘密：尺寸分配，第 2 部分
3. 容器的秘密：尺寸分配，第 3 部分
4. 容器的秘密：尺寸分配，第 4 部分
5. 容器的秘密：尺寸分配，第 5 部分
6. 包含这些更改的代码

方向

GTK+ 中的许多窗口小部件可以水平或垂直方向显示。从分隔符到工具栏的任何东西都实现了 GtkOrientable 接口，允许通过设置 ::orientation 属性在运行时更改方向。因此，很明显，GtkCenterBox 也应该遵循此模式。

我不会详细解释如何添加接口和实现属性。对我们来说有趣的部分是我们将如何在尺寸分配期间使用方向属性。

值得庆幸的是，我们的大部分机制已经用单个维度编写，并且可以像应用于宽度一样应用于高度。剩下的工作是遍历所有函数，并确保我们在执行任何依赖于它的操作时都考虑方向。例如，我们引入一个小的助手来查询正确的 expand 属性。

static gboolean
get_expand (GtkWidget *widget,
            GtkOrientation orientation)
{
  if (orientation == GTK_ORIENTATION_HORIZONTAL)
    return gtk_widget_get_hexpand (widget);
  else
    return gtk_widget_get_vexpand (widget);
}

需要记住的一件事是，我们在此处实现的一些功能仅适用于水平方向，例如从右到左的翻转或基线。

measure() 函数更改为避免硬编码水平方向

if (orientation == self->orientation)
  gtk_center_box_measure_orientation (widget, orientation, for_size,
                                      minimum, natural,
                                      min_baseline, nat_baseline);
else
  gtk_center_box_measure_opposite (widget, orientation, for_size,
                                   minimum, natural,
                                   min_baseline, nat_baseline);

size_allocate() 函数调用 distribute() 来分配宽度或高度，具体取决于方向

if (self->orientation == GTK_ORIENTATION_HORIZONTAL) {
  size = width;
  for_size = height;
} else {
  size = height;
  for_size = width;
}
distribute (self, for_size, size, sizes);

经过这些直接但繁琐的更改后，我们可以垂直方向显示中心框

参考资料

1. 容器的秘密：尺寸分配
2. 容器的秘密：尺寸分配，第 2 部分
3. 容器的秘密：尺寸分配，第 3 部分
4. 容器的秘密：尺寸分配，第 4 部分
5. 包含这些更改的代码

高度随宽度变化

这是我们进入 GTK+ 尺寸分配更深层的地方。高度随宽度变化意味着窗口小部件不是只有一个最小尺寸，而是可能会为了获得更大的高度而适应较小的宽度。大多数窗口小部件并非如此。此行为的典型示例是一个标签，它可以将其文本包装为多行

高度随宽度变化使尺寸分配更加昂贵，因此容器必须通过设置请求模式来显式启用它。通常，容器应查看其子元素并使用大多数子元素首选的请求模式。为简单起见，我们在此处硬编码高度随宽度变化

static GtkSizeRequestMode
gtk_center_box_get_request_mode (GtkWidget *widget)
{
  return GTK_SIZE_REQUEST_HEIGHT_FOR_WIDTH;
}

双向测量

编写可以处理高度随宽度变化的 measure() 函数的惯用方法是将其分解为两种情况：一种是我们沿着布局的方向进行测量，另一种是我们沿着相反的方向进行测量。

if (orientation == GTK_ORIENTATION_HORIZONTAL)
  measure_orientation (widget, for_size,
                       orientation,
                       minimum, natural,
                       minimum_baseline, natural_baseline);
else
  measure_opposite (widget, for_size,
                    orientation,
                    minimum, natural,
                    minimum_baseline, natural_baseline);

沿着方向进行测量就像我们一直以来所做的 measure() 函数一样：我们得到一个高度，所以我们询问所有子元素对于该高度需要多少宽度，然后将答案相加。

沿着相反方向进行测量意味着回答这个问题：给定此宽度，您需要多少高度？我们想问子元素相同的问题，但是我们应该给每个子元素多少宽度？我们不能只是将完整宽度传递给每个子元素，因为我们不希望它们重叠。

分配

为了解决这个问题，我们需要在子元素之间分配可用的宽度。这正是我们的 size_allocate() 函数正在做的事情，因此我们需要将 size_allocate() 的核心部分分解为一个单独的函数。

毫不奇怪，我们将新函数称为 distribute()。

static void
distribute (GtkCenterBox *self,
            int for_size,
            int size,
            GtkRequestedSize *sizes)
{
   /* Do whatever size_allocate() used to do
    * to determine sizes
    */

  sizes[0].minimum_size = start_size;
  sizes[1].minimum_size = center_size;
  sizes[2].minimum_size = end_size;
}

现在我们知道如何获取子元素的候选宽度，我们可以完成沿着相反方向进行测量的函数。与之前一样，我们最终返回子元素所需高度的最大值，因为我们的布局是水平的。

请注意，在这种情况下，方向是 GTK_ORIENTATION_VERTICAL，因此 gtk_widget_measure() 调用返回的 min 和 nat 值是高度。

distribute (self, -1, width, sizes);

gtk_widget_measure (start_widget,
                    orientation,
                    sizes[0].minimum_size,
                    &start_min, &start_nat,
                    &min_baseline, &nat_baseline);

gtk_widget_measure (center_widget,
                    orientation,
                    sizes[1].minimum_size,
                    &center_min, &center_nat,
                    &min_baseline, &nat_baseline);

gtk_widget_measure (end_widget,
                    orientation,
                    sizes[2].minimum_size,
                    &end_min, &end_nat,
                    &min_baseline, &nat_baseline);

*minimum = MAX (start_min, center_min, end_min);
*natural = MAX (start_nat, center_nat, end_nat);

由于我们现在已经将 size_allocate() 的大部分内容分解为 distribute() 函数，我们可以直接从那里调用它，然后执行将位置分配给子元素所需的其余工作（因为 distribute 已经为我们提供了尺寸）。

参考资料

1. 容器的秘密：尺寸分配
2. 容器的秘密：尺寸分配，第 2 部分
3. 容器的秘密：尺寸分配，第 3 部分
4. 包含这些更改的代码
5. 关于高度随宽度变化的几何管理的文档

 展开子元素

在我们的特性丰富的尺寸分配探索中，下一站是 ::expand 属性。实际上有两个这样的属性，即 ::hexpand 和 ::vexpand，它们有一个相当有趣的特性，即在部件层级结构中向上传播。但这不是我们今天要讨论的内容，我们只是想让我们的中心框部件的子部件在设置了 ::hexpand 标志时，能够占用所有可用空间。

同样，measure() 的实现可以保持原样。我们再次需要决定，如果多个子部件都设置了 expand 标志，应该先扩展哪个。GtkBox 尝试平等对待所有子部件，并在所有扩展子部件之间平均分配可用的额外空间。而另一方面，我们更偏爱中心子部件，因为它最重要。

但是我们该如何实现呢？经过一些实验，我发现，如果我们已经因为中心子部件不适合而必须将其向左或向右推，那么再使其更大就没有意义了。因此，我们只在不是这种情况时才考虑 expand 标志。

center_expand = gtk_widget_get_hexpand (center);

if (left_size > center_x)
  center_x = left_size;
else if (width - right_size < center_pos + center_size)
  center_x = width - center_width - right_size;
else if (center_expand) {
  center_width = width - 2 * MAX (left_size, right_size);
  center_x = (width / 2) - (center_width / 2);
}

这样做之后，如果外部子部件正在扩展，可能还会有一些空间留给它们。

if (left_expand)
  left_size = center_pos - left_pos;
if (right_expand)
  right_size = pos + width - (center_pos + center_width);

参考资料

1. 容器的秘密：尺寸分配
2. 容器的秘密：尺寸分配，第 2 部分
3. 包含这些更改的代码

从右到左的语言

作为本系列的第一项，我们重新添加了对从右到左语言的支持。

如果您只习惯于用英语编写软件，这可能会有点令人惊讶，但是 GTK+ 传统上一直尝试为像希伯来语这样从右到左书写的语言自动“做正确的事”。具体来说，这意味着我们在这些语言中将水平布局的起始位置解释为在右侧，即我们“翻转”水平排列。当然，可以通过设置容器的 ::text-direction 属性来覆盖此设置。默认情况下，文本方向是从区域设置中确定的。

这当然很容易做到。我在第一篇文章中展示的代码假定子部件的顺序是从左到右的。我们保持这种方式，并在必要时重新排序子部件。请注意，measure() 代码不需要任何更改，因为它根本不依赖于顺序。因此，我们只需要更改 size_allocate()。

if (text_direction == rtl) {
  child[0] = last;
  child[1] = center;
  child[2] = first;
} else {
  child[0] = first;
  child[1] = center;
  child[2] = last;
}

我还没有提到一个小问题：CSS 假设 :first-child 始终是最左边的元素，而不管文本方向如何。因此，当我们在 RTL 上下文中将子部件从左侧移动到右侧时，我们需要在文本方向更改时重新排序相应的 CSS 节点。

if (direction == GTK_TEXT_DIR_LTR) {
  first = gtk_widget_get_css_node (start_widget);
  last = gtk_widget_get_css_node (end_widget);
} else {
  first = gtk_widget_get_css_node (end_widget);
  last = gtk_widget_get_css_node (start_widget);
}

parent = gtk_widget_get_css_node (box);
gtk_css_node_insert_after (parent, first, NULL);
gtk_css_node_insert_before (parent, last, NULL);

自然大小

既然这很简单，我们将继续前进，使我们的尺寸分配也尊重自然大小。

在 GTK+ 中，每个部件不仅有一个最小尺寸，这是它可以有效呈现自身的最小尺寸，而且还有一个首选或自然尺寸。measure() 函数返回这两个尺寸。

对于自然尺寸，我们可以比上次展示的代码做得更好一点。当时，我们只是通过将所有子部件的自然尺寸加起来来计算框的自然尺寸。但是我们希望将中间的子部件居中，因此让我们要求足够的空间来使所有子部件都达到它们的自然尺寸并且将中间的子部件放在中心。

*natural = child2_nat + 2 * MAX (child1_nat, child3_nat);

size_allocate() 函数需要做更多的工作，在这里我们需要做一些决定。在 3 个子部件争夺可用空间，以及居中施加的额外约束的情况下，我们可以选择给外部子部件更多的空间，或者使中心子部件更大。由于居中是此部件的定义特征，因此我选择了后者。

那么，我们可以给中心部件多少空间呢？我们不想使其小于最小尺寸，或大于自然尺寸，并且我们需要为外部子部件至少保留所需的最小空间。

center_size = CLAMP (width - (left_min + right_min),
                     center_min, center_nat);

接下来，让我们计算一下我们可以给外部子部件多少空间。显然，我们不能分配比在给予中心子部件其部分后剩下的更多的空间，并且为了使居中工作（这就是下面代码中 avail 的含义），我们必须平均分配剩余空间。同样，要尊重子部件的最小和自然尺寸。

avail = MIN ( (width - center_size) / 2,
              width - (center_size + right_min));
left_size = CLAMP (avail, left_min, left_nat);

右子部件也类似。确定子部件尺寸后，剩下的就是按照我们在第一部分中看到的方式分配位置：将外部子部件放在最左侧和最右侧，然后将中间的子部件居中，并将其向右或向左推以避免重叠。

参考资料

1. 容器秘密，尺寸分配
2. 包含这些更改的代码

我最近有机会为容器重新实现尺寸分配，其中包含 GTK+ 支持的所有功能

• RTL 支持
• 自然大小
• 对齐和扩展
• 高度随宽度变化
• 方向支持
• 基线

如果您在应用程序中进行一次性容器，其中大多数可能无关紧要，但在通用的 GTK+ 部件中，所有这些迟早都可能会变得相关。

由于要涵盖的内容很多，因此需要几篇文章才能完成。让我们开始吧！

起点

GtkCenterBox 是一个简单的部件，可以包含三个子部件 - 它不是一个 GtkContainer，至少目前不是。在 GTK+ 4 中，任何部件都可以是其他部件的父部件。GtkCenterBox 应用于其子部件的布局是将中间的子部件居中，只要这是可能的。这是 GtkBox 在 GTK+ 3 中提供的功能，但是中心子部件处理使已经很复杂的容器更加复杂。因此，我们在 GTK+ 4 中将其移到一个单独的部件中。

当我开始查看 GtkCenterBox 尺寸分配代码时，它非常简单。需要查看的两个方法是 measure() 和 size_allocate()。

measure 实现只是测量三个子部件，在水平方向上将最小尺寸和自然尺寸相加，然后在垂直方向上取它们的最大值。用粗略的伪代码表示

if (orientation == GTK_ORIENTATION_HORIZONTAL) {
  *minimum = child1_min + child2_min + child3_min;
  *natural = child1_nat + child2_nat + child3_nat;
} else {
  *minimum = MAX(child1_min, child2_min, child3_min);
  *natural = MAX(child1_min, child2_min, child3_min);
}

size_allocate 实现是将第一个子部件放在左侧，将最后一个子部件放在右侧，然后将中间的子部件放在中心，并通过根据需要将其向右或向左推来消除重叠。

child1_width = child1_min;
child2_width = child2_min;
child3_width = child3_min;
child1_x = 0;
child3_x = total_width - child3_width;
child2_x = total_width/2 - child2_width/2;
if (child2_x < child1_x + child1_width)
  child2_2 = child1_x + child1_width;
else if (child2_x + child2_width > child3_x)
  child2_x = child3_x - child2_width;

如您所见，这非常简单。遗憾的是，它没有任何我上面列出的功能

• 子部件始终获得其最小尺寸
• ::expand 属性未被考虑在内
• 第一个子部件始终位于左侧，而不管文本方向如何
• 没有垂直方向
• 不支持高度换宽度
• 基线被忽略

在接下来的几篇文章中，我将尝试展示如何重新添加这些功能，希望能在此过程中阐明 GTK+ 尺寸分配工作原理的一些奥秘。

参考资料

1. 本系列中的第一个提交
2. GtkWidget 的尺寸分配文档
3. 我们开始使用的代码