使用GNOME Builder与Glade开发时窗口渲染异常问题排查

核心问题分析 #

1. GtkBox布局方向未指定：GTK4中GtkBox默认采用垂直布局（vertical），未显式设置orientation属性时，按钮会纵向堆叠，无法实现横向排列效果。
2. GTK版本依赖冲突：UI文件同时声明了GTK 4.0和GTK+ 3.10的依赖，两个版本API不兼容，会导致渲染逻辑混乱。
3. 布局属性矛盾：homogeneous=True设置要求子部件均分空间，但按钮的expand=False限制了扩展，导致布局不符合预期。

修正后的UI代码 #

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.38.2 -->
<interface>
  <requires lib="gtk" version="4.0"/>
  <template class="EmucratelauncherWindow" parent="GtkApplicationWindow">
    <property name="can-focus">False</property>
    <property name="default-width">600</property>
    <property name="default-height">300</property>
    <child>
      <object class="GtkBox">
        <property name="visible">True</property>
        <property name="can-focus">False</property>
        <property name="orientation">horizontal</property>
        <property name="spacing">100</property>
        <property name="homogeneous">True</property>
        <child>
          <object class="GtkButton">
            <property name="label" translatable="yes">button</property>
            <property name="visible">True</property>
            <property name="can-focus">True</property>
            <property name="receives-default">True</property>
          </object>
          <packing>
            <property name="expand">True</property>
            <property name="fill">True</property>
            <property name="position">0</property>
          </packing>
        </child>
        <child>
          <object class="GtkButton">
            <property name="label" translatable="yes">button</property>
            <property name="visible">True</property>
            <property name="can-focus">True</property>
            <property name="receives-default">True</property>
          </object>
          <packing>
            <property name="expand">True</property>
            <property name="fill">True</property>
            <property name="position">1</property>
          </packing>
        </child>
        <child>
          <object class="GtkButton">
            <property name="label" translatable="yes">button</property>
            <property name="visible">True</property>
            <property name="can-focus">True</property>
            <property name="receives-default">True</property>
          </object>
          <packing>
            <property name="expand">True</property>
            <property name="fill">True</property>
            <property name="position">2</property>
          </packing>
        </child>
      </object>
    </child>
    <child type="titlebar">
      <object class="GtkHeaderBar" id="header_bar">
        <property name="can-focus">False</property>
        <child type="end">
          <object class="GtkMenuButton">
            <property name="can-focus">False</property>
            <property name="receives-default">False</property>
            <child>
              <placeholder/>
            </child>
          </object>
        </child>
      </object>
    </child>
  </template>
</interface>

关键修改说明 #

• 移除<requires lib="gtk+" version="3.10"/>，消除版本依赖冲突。
• 给GtkBox添加orientation=horizontal属性，强制启用横向布局。
• 将按钮的expand属性改为True，配合homogeneous=True实现均匀的空间分配。

验证步骤 #

1. 在GNOME Builder中重新加载UI文件，清理构建缓存后重新编译项目。
2. 确认系统安装的GTK4版本与UI声明的4.0兼容，避免版本不匹配导致的渲染异常。

内容的提问来源于stack exchange，提问作者Bloxxel64