Gtk HeaderBar ActionBar pack_start pack_end 在 UI xml 文件中

Question

我们正在试用 Gtk3/Vala/Genie 使用 Gnome-Builder/Meson/Glade/Flatpak 开发应用程序用户界面。虽然在 Vala 和其他 Gtk 文档中有许多 Gtk.HeaderBar.pack_start( ... ) 和 Gtk.ActionBar.pack_start( ... ) 的示例，但我们无法在 xml ui 文件中找到使用示例。

所以问题是：如何将 pack_start/pack_end 与 ui xml 文件一起使用？是否有生成 xml ui 文件或如何在 Glade 中生成的示例？这会作为 HeaderBar/ActionBar 的 property/attribute/child 输入吗？这会是什么样子——一般结构是什么？如果它不是 GtkChild，那么如何在 Vala/Genie 源文件中访问它？

提供以下琐碎的 xml 文件 MainApplication.ui，例如，如何将一个 pack_start 和 pack_end 一个 GtkColorButton 到 GtkHeaderBar?

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.20.2 -->
<interface>
  <requires lib="gtk+" version="3.20"/>
  <template class="MainWindow" parent="GtkApplicationWindow">
    <property name="can_focus">False</property>
    <property name="default_width">1024</property>
    <property name="default_height">768</property>
    <child type="titlebar">
      <object class="GtkHeaderBar" id="header_bar">
        <property name="visible">True</property>
        <property name="can_focus">False</property>
        <property name="title">Test Application</property>
        <property name="subtitle">gnome.org</property>
        <property name="show_close_button">True</property>
      </object>
    </child>
    <child>
      <object class="GtkBox" id="content_box">
        <property name="visible">True</property>
        <property name="can_focus">False</property>
        <property name="orientation">vertical</property>
        <child>
          <placeholder/>
        </child>
        <child>
          <object class="GtkActionBar" id="action_bar">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="position">1</property>
          </packing>
        </child>
      </object>
    </child>
  </template>
</interface>

这在源文件中使用 MainApplication.gs 如下：

[GtkTemplate (ui = "/org/gnome/application/ui/MainApplication.ui")]
class MainWindow : Gtk.ApplicationWindow

    [GtkChild]
    header_bar:Gtk.HeaderBar

    [GtkChild]
    action_bar:Gtk.ActionBar

    construct ( application:Gtk.Application )

        GLib.Object( application: application )

class MainApplication:Gtk.Application

    construct( id:string, flags:GLib.ApplicationFlags )

        /* set locale: ALL, "" */
        Intl.setlocale()

        /* set properties */
        set_application_id( id )
        set_flags( flags )

Answer 1

how does one use pack_start/pack_end with the ui xml file?

你不知道。这些方法用于以编程方式将 child 小部件添加到容器小部件。使用 glade 执行此操作避免了使用代码执行此操作的需要。

Are there any examples of a generated xml ui file or how to generate within Glade?

不确定我是否理解这里的问题。 Glade 生成 xml ui 定义文件。将它们与 GtkBuilder 一起使用将实例化小部件，然后您可以使用 Gtk.Builder get_object 方法检索这些小部件。您正在使用另一个选项，称为 Gtk Composite Templates。这允许您在 glade 中创建复合小部件并将小部件映射到您的代码 class/class properties/fields，这将加速编码过程。你可以read more here

Would this be entered as a property/attribute/child of the HeaderBar/ActionBar?

它足够灵活，可以将 Window class 和 header 栏作为 property/field 并且 header 栏中的小部件也将是属性window 或分离关注点，将 header 栏作为复合小部件，然后将 header 栏添加到 window。对于最后一个选项，您需要以编程方式将 header 栏设置为 window，除非您准备好处理 glade 小部件目录以允许您拥有自己的 header 栏组合小部件可用在 glade 的左侧小部件面板上。

What would this look like - what would be the general structure? If it is not a GtkChild, then how does one access it within the Vala/Genie source file?

如果它不是 child，我们会假设它不在林间空地定义内或不存在于任何地方，因此它必须以编程方式实例化并添加到带有 Gtk.Container 的容器中 add 方法或特定容器添加方法，如 pack_start/end 等

Supplying the following trivial xml file MainApplication.ui, for example, how would one pack_start and pack_end a GtkColorButton to the GtkHeaderBar?

您可以使用 glade 添加一个 GtkColorButton，命名它，将它设置为 GtkChild 并检索它。这将是您的复合小部件的一个字段（假设您的代码和模板的使用）。

如果不是，则您将创建 Gtk.ColorButton 的新实例并将其以编程方式 添加到 Gtk.HeaderBar。由于 Gtk.HeaderBar 是一个容器（继承自 Gtk.Container 抽象 class），您有一些方法可以向其中添加 childs：

Gtk.HeaderBar pack_start and pack_end
Gtk.Containermethods（添加，add_with_properties...）

示例，在 Vala 中，使用 1 和 2 添加 Gtk.ColorButton：

header_bar.pack_start (new Gtk.ColorButton ());
header_bar.add (new Gtk.ColorButton ());

Answer 2

好的。只是为了完成目的，在玩弄 Glade 之后，我为 ui xml 文件生成了这个结构，它说明了打包在 HeaderBar 中的工作方式。我根本找不到这方面的任何示例，也找不到在 ui 文件中包含此内容的任何来源 - 大量以编程方式进行 - 但 none 目前显示为 xml。当指示 position（从零开始）的 <packing></packing> 标记作为 child 元素的一部分包含时，魔法就会发生，即：

<packing>
  <property name="position">2</property>
</packing>

而且似乎没有必要为第一个零索引 child 添加包装标签。

对于结束打包，魔术是通过使用 pack_type 属性:

<packing>
  <property name="pack_type">end</property>
  <property name="position">1</property>
</packing>

所以程序化 pack_start 和 pack_end 的 equivalent xml 是 pack_type 属性。

在完整的上下文中，以下说明了在包含 GtkHeaderBar 的标题栏中的使用：

<child type="titlebar">
  <object class="GtkHeaderBar" id="header_bar">
    <property name="visible">True</property>
    <property name="can_focus">False</property>
    <property name="title">Test Application</property>
    <property name="subtitle">gnome.org</property>
    <property name="show_close_button">True</property>
    <child>
      <object class="GtkButton">
        <property name="label">gtk-justify-fill</property>
        <property name="visible">True</property>
        <property name="can_focus">True</property>
        <property name="receives_default">True</property>
        <property name="use_stock">True</property>
        <property name="always_show_image">True</property>
      </object>
    </child>
    <child>
      <object class="GtkButton">
        <property name="label">gtk-edit</property>
        <property name="visible">True</property>
        <property name="can_focus">True</property>
        <property name="receives_default">True</property>
        <property name="use_stock">True</property>
        <property name="always_show_image">True</property>
      </object>
      <packing>
        <property name="position">1</property>
      </packing>
    </child>
    <child>
      <object class="GtkButton">
        <property name="label">gtk-find</property>
        <property name="visible">True</property>
        <property name="can_focus">True</property>
        <property name="receives_default">True</property>
        <property name="use_stock">True</property>
      </object>
      <packing>
        <property name="position">2</property>
      </packing>
    </child>
  </object>
</child>

Answer 3

在 Glade 中使用“位置”选项卡也是完全可行的。

查看附图并注意我将第 3 个按钮放置在标题栏的 right-end 处。 Select 按钮，单击位置选项卡和 select“结束”作为位置。

Glade 预览还在最后呈现打包的第 3 个按钮，就像在代码中调用 pack_end() 一样。

Gtk HeaderBar ActionBar pack_start pack_end 在 UI xml 文件中

Gtk HeaderBar ActionBar pack_start pack_end within UI xml file

glade

vala

genie

gtk3

gnome-3