GTK 开发博客

（这是关于 GTK 4 中自定义小部件的系列文章的第三部分。第一部分，第二部分）。

推荐使用小部件

正如我们之前所说，“一切皆为小部件”。例如，我们建议您使用 GtkLabel 而不是手动渲染 pango 布局，或使用 GtkImage 而不是手动加载和渲染 pixbuf。使用现成的小部件可确保您获得所有预期的行为，例如选择处理、上下文菜单或高 DPI 支持。而且它比自己完成所有事情要容易得多。

委托布局

snapshot() 和 measure() 函数的默认实现会自动处理子小部件。自定义小部件的主要责任是根据需要排列子小部件。在 GTK 3 中，这将通过实现 size_allocate() 函数来完成。您仍然可以这样做。但是在 GTK 4 中，更方便的选择是使用布局管理器。GTK 附带了许多预定义的布局管理器，例如 GtkBoxLayout、GtkCenterLayout、GtkGridLayout，仅举几例。

布局管理器可以通过多种方式进行设置，最简单的方法是在您的 class_init 函数中设置布局管理器类型

gtk_widget_class_set_layout_manager_type (widget_class, 
                                          GTK_TYPE_GRID_LAYOUT);

然后，GTK 将自动实例化并使用此类型的布局管理器。

布局管理器将您的子小部件包装在它们自己的“布局子”对象中，这些对象可以具有影响布局的属性。这是子属性的替代品。就像子属性一样，您可以在 ui 文件中设置这些“布局属性”

<child>
  <object class="GtkLabel">
    <property name="label">Image:</property>
    <layout>
      <property name="left-attach">0</property>
    </layout>
  </object>
</child>

添加子项

使用模板是将子项添加到小部件的最方便方法。在 GTK 4 中，这适用于任何小部件，而不仅仅是容器。如果出于某种原因，您需要手动创建子小部件，则最好在您的 init() 函数中完成

void
demo_init (DemoWidget *demo)
{
  demo->label = gtk_label_new ("Image:");
  gtk_widget_set_parent (demo->label, GTK_WIDGET (demo));
}

这样做时，重要的是设置正确的父子关系，使您的子小部件成为整个小部件层次结构的一部分。并且这种设置需要在您的 dispose() 函数中撤销

void
demo_dispose (GObject *object)
{
  DemoWidget *demo = DEMO_WIDGET (object);

  g_clear_pointer (&demo->label, gtk_widget_unparent);

  GTK_WIDGET_CLASS (demo_widget_parent_class)->dispose (object);
}

新的可能性

布局管理器很好地将布局任务与小部件机制的其余部分隔离，这使得尝试新的布局更容易。

例如，GTK 4 包括 GtkConstraintLayout，它使用约束求解器，根据小部件大小和位置的一组约束来创建布局。

要了解有关 GTK 4 中约束的更多信息，请阅读 GtkConstraintLayout 的文档。

展望

在下一篇文章中，我们将探讨 GTK 4 中的小部件如何处理输入。

（这是关于 GTK 4 中自定义小部件的系列文章的第二部分。第一部分）。

老式的绘图方式

在研究小部件如何进行自己的绘图之前，值得指出的是，如果您只需要一些独立的 cairo 绘图，GtkDrawingArea 仍然是一个有效的选择。

GTK 3 和 GTK 4 之间的唯一区别是您调用 gtk_drawing_area_set_draw_func() 来提供您的绘图函数，而不是将信号处理程序连接到 ::draw 信号。其他一切都相同：GTK 为您提供了一个 cairo 上下文，您可以直接在其上进行绘制。

void
draw_func (GtkDrawingArea *da,
           cairo_t        *cr,
           int             width,
           int             height,
           gpointer        data)
{
  GdkRGBA red, green, yellow, blue;
  double w, h;

  w = width / 2.0;
  h = height / 2.0;

  gdk_rgba_parse (&red, "red");
  gdk_rgba_parse (&green, "green");
  gdk_rgba_parse (&yellow, "yellow");
  gdk_rgba_parse (&blue, "blue");

  gdk_cairo_set_source_rgba (cr, &red);
  cairo_rectangle (cr, 0, 0, w, h);
  cairo_fill (cr);

  gdk_cairo_set_source_rgba (cr, &green);
  cairo_rectangle (cr, w, 0, w, h);
  cairo_fill (cr);

  gdk_cairo_set_source_rgba (cr, &yellow);
  cairo_rectangle (cr, 0, h, w, h);
  cairo_fill (cr);

  gdk_cairo_set_source_rgba (cr, &blue);
  cairo_rectangle (cr, w, h, w, h);
  cairo_fill (cr);
}

...

gtk_drawing_area_set_draw_func (area, draw, NULL, NULL);

渲染模型

GTK 3 和 GTK 4 之间的主要区别之一是我们现在以 GL/Vulkan 而不是 cairo 为目标。作为此切换的一部分，我们已从即时模式渲染模型转移到保留模式。在 GTK 3 中，我们使用 cairo 命令渲染到表面上。在 GTK 4 中，我们创建一个包含渲染节点的场景图，这些渲染节点可以传递给渲染器，或以其他方式处理，或保存到文件中。

在小部件 API 中，此更改反映在以下两者之间的差异中

gboolean (* draw) (GtkWidget *widget, cairo_t *cr)

和

 void (* snapshot) (GtkWidget *widget, GtkSnapshot *snapshot)

GtkSnapshot 是一个辅助对象，它将您的绘图命令转换为渲染节点并将它们添加到场景图中。

小部件的 CSS 样式信息描述了如何渲染其背景、边框等等。GTK 将此转换为一系列函数调用，这些函数调用会在小部件内容的渲染节点之前和之后将合适的渲染节点添加到场景图中。因此，您的小部件会自动符合 CSS 绘图模型，无需额外的工作。

为内容提供渲染节点是小部件 snapshot() 实现的责任。GtkSnapshot 具有方便的 API，使其易于使用。例如，使用 gtk_snapshot_append_texture() 来渲染纹理。使用 gtk_snapshot_append_layout() 来渲染文本。如果您想使用自定义 cairo 绘图，gtk_snapshot_append_cairo() 可让您这样做。

绘图小部件

要实现一个进行一些自定义绘图的小部件，您需要实现 snapshot() 函数，该函数为您的绘图创建渲染节点

void
demo_snapshot (GtkWidget *widget, GtkSnapshot *snapshot)
{
  GdkRGBA red, green, yellow, blue;
  float w, h;

  gdk_rgba_parse (&red, "red");
  gdk_rgba_parse (&green, "green");
  gdk_rgba_parse (&yellow, "yellow");
  gdk_rgba_parse (&blue, "blue");

  w = gtk_widget_get_width (widget) / 2.0;
  h = gtk_widget_get_height (widget) / 2.0;

  gtk_snapshot_append_color (snapshot, &red,
                             &GRAPHENE_RECT_INIT(0, 0, w, h));
  gtk_snapshot_append_color (snapshot, &green,
                             &GRAPHENE_RECT_INIT(w, 0, w, h));
  gtk_snapshot_append_color (snapshot, &yellow,
                             &GRAPHENE_RECT_INIT(0, h, w, h));
  gtk_snapshot_append_color (snapshot, &blue,
                             &GRAPHENE_RECT_INIT(w, h, w, h));
}

...

widget_class->snapshot = demo_snapshot;

此示例生成四个颜色节点

如果您的绘图需要特定大小，您也应该实现 measure() 函数

void
demo_measure (GtkWidget      *widget,
              GtkOrientation  orientation,
              int             for_size,
              int            *minimum_size,
              int            *natural_size,
              int            *minimum_baseline,
              int            *natural_baseline)
{
  *minimum_size = 100;
  *natural_size = 200;
}

...

widget_class->measure = demo_measure;

GTK 会保留您的 snapshot() 函数生成的渲染节点，并在您通过调用 gdk_widget_queue_draw() 告诉它您的小部件需要再次绘制之前重复使用它们。

更深入地了解

如果您有兴趣阅读更多关于此主题的内容，GTK 文档概述了 GTK 绘图模型。

展望

在下一篇文章中，我们将探讨 GTK 4 中的小部件如何处理子小部件。

随着 GTK 4 越来越接近完成，现在是时候概述一下 GTK 4 中自定义小部件的外观了。

这系列文章将探讨编写小部件的主要方面，以及它们与 GTK 3 相比的变化。这些文章将提供一个高层次的概述；有关将应用程序移植到 GTK 4 的详细清单，请查看 迁移指南。

简介

我们的 API 更改的总体方向是强调委托而不是子类化。这样做的动机之一是使编写自己的小部件更容易且不易出错。因此，您将看到更多辅助对象接管核心小部件类的功能方面。许多小部件现在是最终类 - 期望直接从 GtkWidget 派生。

我们的 API 的另一个总体趋势是“一切皆为小部件”。在 GTK 3 中，我们缓慢地将复杂的小部件分解为它们的组成部分，首先是 CSS 节点，然后是小工具。例如，在 GTK 4 中，GtkScale 的槽和滑块是完全形成的子小部件，它们可以保持自己的状态并像任何其他小部件一样接收输入。

GTK 4 过渡中的一个大输家是 GtkContainer 基类。它变得不那么重要了。现在任何小部件都可以有子小部件。子属性已被布局子及其属性取代。所有焦点处理已从 GtkContainer 移动到 GtkWidget。

另一个大输家是 GtkWindow。在 GTK 3 中，所有“弹出窗口”（条目完成、菜单、工具提示等）都在下面使用 GtkWindow。在 GTK 4 中，它们中的大多数已转换为弹出窗口，并且 GtkPopover 实现已从 GtkWindow 中解开。此外，许多特定于顶层的功能已分解为单独的接口，称为 GtkRoot 和 GtkNative。

展望

在下一篇文章中，我们将探讨 GTK 4 中的小部件如何使用渲染节点进行自己的绘图。