代码之家  ›  专栏  ›  技术社区  ›  Scindix

Gtk3/Gnome 3彩色按钮:应用“.需要注意”css样式

  •  3
  • Scindix  · 技术社区  · 7 年前

    前言

    在gnome 3应用程序中,一些按钮通过着色背景而不是普通按钮的灰色来突出显示。这些按钮不仅在使用标准Adwaita主题时颜色不同,而且还可以在各种其他主题中实现。下面是Adwaita和Flat Plat主题的普通按钮和彩色按钮的示例。

    阿德维塔

    Adwaita normal Adwaita needs-attention

    平板

    Flat Plat normal Flat Plat needs-attention

    现在是我的问题

    我希望能够在Gtk3应用程序中实现这些“重要按钮”。在研究如何做到这一点的过程中,我在主题文件中发现,这些“重要按钮”有一个特殊的CSS类,名为 needs-attention . 然后我尝试将按钮的CSS类设置为 需要注意 也然而,这不起作用。我还在买一个灰色的标准按钮。为了演示我所做的,我附加了一个最小脚本和运行程序的屏幕截图。“重命名”按钮应该像上面的屏幕截图一样突出显示。我该怎么做?

    我的代码

    Screenshot of script

    #!/usr/bin/env python3
    
    import gi
    gi.require_version('Gtk', '3.0')
    from gi.repository import Gtk
    
    class ButtonWindow(Gtk.Window):
    
        def __init__(self):
            Gtk.Window.__init__(self, title="Needs Attention Button")
            self.set_border_width(10)
    
            hbox = Gtk.Box(spacing=6)
            self.add(hbox)
    
            button = Gtk.Button.new_with_label("Remove")
            hbox.pack_start(button, True, True, 0)
    
            button = Gtk.Button.new_with_mnemonic("Rename")
            button.get_style_context().add_class("needs-attention")
            hbox.pack_start(button, True, True, 0)
    
    win = ButtonWindow()
    win.connect("delete-event", Gtk.main_quit)
    win.show_all()
    Gtk.main()
    
    2 回复  |  直到 4 年前
        1
  •  3
  •   José Fonte    7 年前

    GNOME的Adwaita主题为建议的操作预定义了两个类:

    • suggested-action
    • destructive-action

    你可以在GNOME维基上阅读 HowDoI/Buttons :

    虽然大多数按钮都是灰色的,但现在更流行的是 通过给按钮一个 不同的颜色。在Adwaita主题中,颜色是蓝色。。。 最近,添加了另一个用于危险操作的样式类,如下所示 嗯:“破坏性行动”。Adwaita主题使用红色作为按钮 标记为这样。

    在Adwaita上,它们分别如下所示:

    • enter image description here
    • enter image description here

    预定义的 needs-attention 同学们,这是Gtk。堆栈/GtkStack子属性,并在Gtk中渲染。堆叠切换器,以引起用户注意,如 GtkStack API Reference :

    需要注意的子属性

    “needs-attention”          gboolean
    

    设置一个标志,指定子级是否需要用户注意。 GtkStackSwitcher使用此选项更改 当页面需要注意且不是 当前一个。

    产生的视觉辅助可以在中看到 gtk3-widget-factory 程序,作为需要注意的孩子上的蓝点(假设Adwaita主题):

    enter image description here

        2
  •  1
  •   Scindix    7 年前

    似乎我所犯的所有错误都是我使用了错误的CSS类。正确的是 suggested-action 而不是 needs-attention . 如果在原始代码中替换该字符串,将得到以下正确结果:

    enter image description here