Question

在Gtk 3.18和Gtk 3.22上运行相同的代码，我得到了不同的视觉结果。下面的代码创建一个Gtk.Frame并将其显示在窗口中。 Gtk框架带有红色边框，并且框架标签文本显示为“框架标签文本”。

Here is a screen shot of Gtk 3.18。框架标签文本显示在红色框架边框上方。

Here is a screen shot of Gtk 3.22。框架标签文本显示在红色框架边框的下方。

我的问题是，如何使Gtk 3.22表现得像Gtk 3.18并在边框上方显示标签？

代码如下：

import gi
gi.require_version('Gtk', '3.0')
from gi.repository import Gtk # pylint: disable=wrong-import-position

class GtkWindow(Gtk.Window):
    def __init__(self):
        Gtk.Window.__init__(self)

    def showme(self):
        window = Gtk.Window()
        gtk_version = "Gtk Version major:{0}, minor:{1}, micro: {2}".format(Gtk.MAJOR_VERSION, Gtk.MINOR_VERSION, Gtk.MICRO_VERSION)
        window.set_title(gtk_version)
        window.set_default_size(480, 320)
        window.connect("delete-event", Gtk.main_quit)
        frame = Gtk.Frame.new("Frame Label Text")
        frame.set_label_align(0.0, 1.0)
        inner_label = Gtk.Label("I am a child label")
        frame.add(inner_label)
        window.add(frame)

        css = b'''
            .frame {
            border-radius : 10px;
            border: 5px solid red;
            background-color: gray;
            color : white;
            }
            .label {
                border-radius : 5px;
                border: 2px solid yellow;
                background-color : gray;
                color: white;
            }
        '''
        css_provider = Gtk.CssProvider()
        css_provider.load_from_data(css)
        frame_style_context = frame.get_style_context()
        frame_style_context.add_class("frame")
        frame_style_context.add_provider(css_provider, Gtk.STYLE_PROVIDER_PRIORITY_USER)
        label_style_context = frame.get_label_widget().get_style_context()
        label_style_context.add_class("label")
        label_style_context.add_provider(css_provider, Gtk.STYLE_PROVIDER_PRIORITY_USER)
        window.show_all()

if __name__ == "__main__":
    win = GtkWindow()
    win.showme()
    Gtk.main()

Answer 1

3.20中的GtkCss changed a lot。

我不是GtkCss的专家，但是看起来在3.22 .frame类中是指整个小部件（请参阅Css Nodes部分here）。为了使一切正常，您应该调整CSS规则并检测确切的Gtk版本。

比较以下css规则：

3.14（我没有3.18，但看起来一样）

.frame {
  border-radius: 10px;
  border: 5px solid red;
  background-color: gray;
  color: white;
}

.label {
  border-radius: 5px;
  border: 2px solid yellow;
  background-color: gray;
  color: white;
}

.frame.border {
  border-radius: 5px;
  border: 2px solid green;
  background-color: cyan;
  color: magenta;
}

3.22

.frame {
  border-radius: 10px;
  border: 5px solid red;
  background-color: gray;
  color: white;
}

.frame>border {
  border-radius: 5px;
  border: 2px solid green;
  background-color: cyan;
  color: magenta;
}

.frame>label {
  border-radius: 5px;
  border: 2px solid yellow;
  background-color: gray;
  color: white;
}

它们看起来this way。另请注意，我已将框架标签的垂直对齐方式设置为0.5，以使其易于区分

gtk3框架标签位置3.18与3.22

1 个答案: