如何在 Cinnamon applet (CJS / GJS) 中将 `St.BoxLayout` 设置为 100% 宽度？

Question

我正在写我的第一个 Cinnamon applet（在我写了一个 desklet 之后）。

我在 PopupMenu.PopupBaseMenuItem 中嵌入了 St.BoxLayout，以便进入弹出菜单。

现在我希望它的宽度为弹出菜单宽度的 100%，但它（即屏幕截图中包含 1 +2 = 3 的框）看起来像这样，只采用最小宽度来包含嵌入的文本当你输入它时它会增长：

我试过了：

a style_class expression-box 和 CSS width: 100%
x_align: Clutter.ActorAlign.FILL,
x_expand: true

但它只是没有扩展它的宽度。我还能尝试什么？

我必须承认我仍在寻找 extensive CJS / GJS documentation，浏览其他小程序的源代码似乎是找出实际工作的最佳方式...

代码如下：

applet.js:

        this.widgets.expressionItem = new PopupMenu.PopupBaseMenuItem({reactive: false, focusOnHover: true});
        this.menu.addMenuItem(this.widgets.expressionItem);
        this.widgets.expressionBox = new St.BoxLayout({
            style_class: "expression-box",
            vertical: true,
            x_align: Clutter.ActorAlign.FILL,
            x_expand: true
        })

stylesheet.css:

.expression-box {
    background-color: lightslategray;
    color: black;
    border-radius: 4px;
    width: 100%;
    padding: 4px;
}

您可以找到完整的 source code in GitHub。

Answer 1

CSS 在这种情况下不会帮助您进行布局，因为这是由小部件工具包处理的。虽然像 width: 100px; 这样的像素宽度可能有效，但百分比无效（除非最近发生了一些变化）。

Cinnamon 似乎正在对 Clutter actor 使用 JavaScript 包装器。 function in current master 看起来像这样：

// adds an actor to the menu item; @params can contain %span
// (column span; defaults to 1, -1 means "all the remaining width", 0 means "no new column after this actor"),
// %expand (defaults to #false), and %align (defaults to
// #St.Align.START)
addActor(child, params) {
    params = Params.parse(params, { span: 1,
                                    expand: false,
                                    align: St.Align.START });
    params.actor = child;
    this._children.push(params);
    this._signals.connect(this.actor, 'destroy', this._removeChild.bind(this, child));
    this.actor.add_actor(child);
}

这也是以前在 GNOME Shell 中使用的方法，但是 as you can see 这里的分配变得相当复杂。因为我不使用 Cinnamon，所以我无法自己测试，但我假设您需要添加具有所需参数的子演员，例如：

this.widgets.expressionItem.addActor(this.widgets.expressionBox, {
    expand: true,
    span: -1,
});

尚不清楚 St.BoxLayout 上的子属性是否会有所不同，但您可能需要稍微尝试一下才能获得所需的效果。

如何在 Cinnamon applet (CJS / GJS) 中将 `St.BoxLayout` 设置为 100% 宽度？

How to get a `St.BoxLayout` to 100% width in a Cinnamon applet (CJS / GJS)?

css

clutter

gnome-shell-extensions

gjs

cinnamon