Gtk4 Python中Gtk Widget的CSS样式不生效问题求助

问题场景 #

开发应用时需要实现用户头像功能：

• 一开始想用libadwaita的Avatar组件，但它不支持加载本地图片，满足不了需求
• 换成Gtk.Image后，尝试用CSS设置border-radius: 50%做圆形头像，但GTK完全忽略这个规则，图片能正常显示但没有圆角效果

原代码 #

Python 实现 #

# 在MainWindow(Adw.ApplicationWindow)类中
css_provider = Gtk.CssProvider()
css_provider.load_from_path("style.css")
Gtk.StyleContext.add_provider_for_display(
    Gdk.Display.get_default(),
    css_provider,
    Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
)

img = Gtk.Image.new_from_file("some_image.jpg")
img.set_pixel_size(100)

self.some_box.append(img)

初始CSS（无效果） #

image { /* 试过'GtkImage'和自定义类，都不行 */
    border: 4px solid #000;
    /* 添加border-radius: 50%后无任何变化 */
}

解决方法 #

用Gtk.Frame作为容器把Gtk.Image包起来，给容器设置圆角和overflow: hidden，就能实现圆形头像效果。

调整后的代码 #

Python 部分

# 在MainWindow(Adw.ApplicationWindow)类中
css_provider = Gtk.CssProvider()
css_provider.load_from_path("style.css")
Gtk.StyleContext.add_provider_for_display(
    Gdk.Display.get_default(),
    css_provider,
    Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
)

img = Gtk.Image.new_from_file("some_image.jpg")
img.set_pixel_size(100)

# 创建Frame容器并包裹图片
avatar_container = Gtk.Frame()
avatar_container.set_child(img)
avatar_container.add_css_class("avatar-container")

self.some_box.append(avatar_container)

CSS 部分

.avatar-container {
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #000;
    /* 尺寸和图片保持一致 */
    width: 100px;
    height: 100px;
}

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