我可以在 GJS 中使用 St.Button 获得悬停和检查效果吗？

Question

我有一个带图标的群组按钮。如果我可以设置悬停效果，因为我在这里看到了一些功能或属性，例如 St.Widget.track-hover St.Widget.sync_hover St.Widget.set_hover，也许可以对使用 css 的按钮进行微小的更改。但是那些函数比较难理解，如果有一些示例代码可以做到这一点？

另外就是因为gjs中没有radio_button，如果我可以用set_checked()做一些显示效果让我的按钮显示checked状态？

Answer 1

answer to checked statu and radio button part first.

找到关键行When the value is true, the St.Button will have the checked CSS pseudo-class set.参考https://gjs-docs.gnome.org/st10~1.0_api/st.button。所以我搜索 checked CSS pseudo-class set，并知道这是由 CSS 文件中的 :checked 属性控制的。

首先在stylesheet.css.

中写下那些行

:checked {
  margin-left: 25px;
  border: 4px solid #CBCBCB;
}

然后在extension.js内设置toggle_mode，然后set_checked 。效果很好。

butt[i] = new St.Button({ can_focus: true, child: icon, toggle_mode: true });

butt[0].set_checked(true);

然后你可以像这样切换一个组按钮。

butt[i].connect('clicked', (self) => {
    butt.forEach((self)=>{ self.checked = false; });
    self.checked = true;
});

我觉得hover也是这样解决的

Answer 2

answer to hover part.

先设置这个。让 St.Widget 可以 track the pointer hover state.

butt[i].set_track_hover(true);

然后像这样设置 css。当鼠标悬停在小部件上时，此样式必须改变一点颜色或其他东西。

:hover { background: #404040; }

然后连接style-changed信号并检查St.Widget.hover属性。当您看到信号名称时，您认为 CSS 必须更改才能发出此信号。 我测试了很多次才发现这个。

butt[i].connect('style-changed', (self) => {
                if(self.hover){
// do here.

我可以在 GJS 中使用 St.Button 获得悬停和检查效果吗？

Can I get a hover and checked effect with St.Button in GJS?

gnome-shell

gnome-shell-extensions

gjs