GJS构建GTK4 Adwaita应用：PreferencesDialog弹窗行为适配问题

核心实现思路 #

要实现和GNOME Text Editor一致的效果，关键是正确关联主窗口并设置模态属性，避免将对话框设为主窗口的子部件。核心逻辑是：将主窗口设为偏好窗口的临时父窗口，同时开启应用级模态，这样既保证弹窗始终在主窗口上方、阻塞主窗口交互，又不会被限制在主窗口尺寸内。

具体代码实现 #

import Adw from 'gi://Adw';
import Gtk from 'gi://Gtk';

// 传入你的ApplicationWindow实例，显示偏好窗口
function showPreferencesDialog(mainWindow) {
    // 使用Adw.PreferencesWindow，这是Adwaita风格偏好窗口的标准组件
    const preferencesWindow = new Adw.PreferencesWindow({
        transient_for: mainWindow, // 关联主窗口作为临时父窗口
        modal: true, // 开启模态，阻塞主窗口交互
        destroy_with_parent: true, // 主窗口关闭时自动销毁偏好窗口
    });

    // 添加偏好页面和设置项（示例）
    const generalPage = new Adw.PreferencesPage({
        title: '通用',
        icon_name: 'preferences-system-symbolic',
    });
    const basicGroup = new Adw.PreferencesGroup({
        title: '基础设置',
    });
    const exampleRow = new Adw.ActionRow({
        title: '示例选项',
        subtitle: '这是一个偏好设置项示例',
    });
    basicGroup.add(exampleRow);
    generalPage.add(basicGroup);
    preferencesWindow.add(generalPage);

    // 显示偏好窗口
    preferencesWindow.present();
}

关键参数说明 #

• transient_for: mainWindow：将偏好窗口与主窗口关联，窗口管理器会识别两者的从属关系，保证弹窗始终在主窗口上方，切换工作区时两者同步，但不会将弹窗限制为主窗口的子部件。
• modal: true：启用模态模式，此时用户必须关闭偏好窗口才能操作主窗口，符合GNOME应用的交互规范。
• 选用Adw.PreferencesWindow：这是GNOME官方推荐的偏好窗口组件，自带符合Adwaita设计的布局结构，无需手动构建对话框框架。

为什么之前的方法不符合预期？ #

1. 将主窗口传入present()：这种方式会把对话框设为主窗口的子部件，导致弹窗被限制在主窗口的边界内，无法自由扩展尺寸。
2. 传入null到present()：没有关联父窗口，窗口管理器无法识别两者关系，主窗口仍可操作，弹窗也能独立移动，不符合模态弹窗的交互要求。

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