GNOME扩展中使用GJS实现单行文本输入弹窗的最简方法

嘿，刚好之前折腾GNOME扩展的时候做过类似的需求！要实现你想要的这种单行文本输入弹窗，其实不用找复杂的第三方库，用GJS自带的GTK组件就能搞定，完全可以模拟你说的prompt()那种简洁效果。下面给你最简化的实现代码：

// 首先确保已经导入Gtk模块，通常在extension.js开头添加
const Gtk = imports.gi.Gtk;

function showPrompt(title, defaultText = "") {
    // 创建模态对话框，绑定到当前窗口确保弹窗置顶
    const dialog = new Gtk.Dialog({
        title: title,
        transient_for: global.display.get_current_monitor().get_root_window(),
        modal: true,
        use_header_bar: true
    });

    // 添加标准的取消和确认按钮，给确认按钮标记为推荐操作样式
    dialog.add_button(Gtk.STOCK_CANCEL, Gtk.ResponseType.CANCEL);
    const okBtn = dialog.add_button(Gtk.STOCK_OK, Gtk.ResponseType.OK);
    okBtn.get_style_context().add_class('suggested-action');

    // 创建单行输入框，设置默认文本
    const entry = new Gtk.Entry({
        text: defaultText,
        hexpand: true
    });
    // 绑定回车事件，按回车直接触发确认
    entry.connect('activate', () => dialog.response(Gtk.ResponseType.OK));

    // 将输入框添加到对话框的内容区域并显示所有组件
    const contentArea = dialog.get_content_area();
    contentArea.add(entry);
    contentArea.show_all();

    // 运行对话框，获取用户操作结果
    const response = dialog.run();
    const inputText = entry.get_text();
    // 记得销毁对话框释放资源
    dialog.destroy();

    // 根据用户操作返回对应内容：确认返回输入文本，取消返回null
    return response === Gtk.ResponseType.OK ? inputText : null;
}

// 调用示例，完全符合你想要的写法
let userEntry = showPrompt("What is your name?", "<name>");
if (userEntry) {
    log(`你输入的名字是：${userEntry}`);
} else {
    log("你取消了输入操作");
}

这里补充几个小细节：

• 对话框设置为modal（模态），确保用户必须处理这个弹窗才能回到主界面，和浏览器的prompt()行为一致。
• 给确认按钮添加suggested-action类，会让按钮显示GNOME风格的高亮样式，更符合系统交互规范。
• 绑定输入框的activate事件，用户按回车就能直接确认，提升操作流畅度。

备注：内容来源于stack exchange，提问作者Alexandros