Блог

Я пытаюсь добавить a GtkLabel справа от a GtkHeaderBar , а затем изменить вес шрифта, но мне это не удается.

У меня есть такой XML:

 <?xml version="1.0" encoding="UTF-8"?>
<interface>
  <template class="ExampleAppWindow" parent="GtkApplicationWindow">
    <property name="title" translatable="yes">Demo</property>
    <property name="default-width">800</property>
    <property name="default-height">600</property>
    <child type="titlebar">
      <object class="GtkHeaderBar" id="header">
        <child type="start">
          <object class="GtkLabel" id="version">
            <property name="label" translatable="yes">Version 1.0.0</property>
          </object>
        </child>
      </object>
    </child>
    <child>
      <object class="GtkBox" id="content_box">
        <property name="orientation">horizontal</property>
        <child>
          <object class="GtkLabel" id="demo">
            <property name="label">Work in progress</property>
          </object>
        </child>
      </object>
    </child>
  </template>
</interface>
 

Тогда у меня есть код

 #include <gtk/gtk.h>

#include "example.h"
#include "exampleappwin.h"

struct _ExampleAppWindow
{
  GtkApplicationWindow parent;
};

G_DEFINE_TYPE(ExamplAppWindow, example_app_window, GTK_TYPE_APPLICATION_WINDOW);

static void
example_app_window_init (ExampleAppWindow *win)
{
    GtkCssProvider *cssProvider = gtk_css_provider_new ();
    gtk_css_provider_load_from_resource (cssProvider, "/org/gtk/exampleapp/theme.css");

    gtk_style_context_add_provider (gtk_widget_get_style_context(GTK_WIDGET (win)),
                               GTK_STYLE_PROVIDER(cssProvider),
                               GTK_STYLE_PROVIDER_PRIORITY_USER);
                               
    gtk_widget_init_template (GTK_WIDGET (win));
}

static void
example_app_window_class_init (ExampleAppWindowClass *class)
{
    gtk_widget_class_set_template_from_resource (GTK_WIDGET_CLASS (class),
                                               "/org/gtk/exampleapp/window.ui");
}

ExampleAppWindow *
example_app_window_new (ExampleApp *app)
{
  return g_object_new (EXAMPLE_APP_WINDOW_TYPE, "application", app, NULL);
}
 

Тогда у меня есть такой стиль

 GtkLabel {
    color: red;
    font-weight: bold;
}
 

И, наконец, gresources

 <?xml version="1.0" encoding="UTF-8"?>
<gresources>
  <gresource prefix="/org/gtk/exampleapp">
    <file preprocess="xml-stripblanks">window.ui</file>
    <file>theme.css</file>
  </gresource>
</gresources>
 

Все компилируется с помощью meson

 example_resources = gnome.compile_resources('asistent_resources',
  'example.gresource.xml',
  source_dir: '.')
 

Но это ничего не делает. Метка не меняет свой стиль. Я также пробовал

 <object class="GtkLabel">
  <property name="label" translatable="yes">Version 1.0.0</property>
  <attributes>
    <attribute name="weight" value="PANGO_WEIGHT_BOLD"/>
    <attribute name="background" value="red" start="5" end="10"/>
  </attributes>
</object>
 

или даже <property name="label" translatable="yes"><b>Version 1.0.0</b></property> , но когда я делаю это, метка просто полностью исчезает из заголовка.

Я зашел так далеко, что смог изменить глобальный стиль, используя

 * {
    color: red;
    font-weight: bold;
}
 

Это работает, но использование .classname #id name селекторов or или or ничего не дает.

Мой код основан на этом примере

Можно подумать, что определение в XML-файле для класса object будет соответствовать атрибуту класса CSS, но это не так. Очевидно, строка определения объекта:

 <object class="GtkLabel" id="demo">
 

это в интересах процесса GTK builder для создания правильных виджетов в программе, а не того, что можно было бы считать атрибутом класса CSS. Однако у вас есть другие доступные альтернативные атрибуты, которые будут работать для применения цвета и веса шрифта в вашем распоряжении.

Метки GTK имеют имя элемента «label», которое теоретически может использоваться со следующим пользовательским блоком CSS.

 label {
    color: red;
    font-weight: bold;
}
 

Однако, поскольку это имя элемента одинаково для всех меток GTK, вы увидите то же поведение, что и при использовании звездочки, как указано выше.

Скорее всего, вы могли бы добавить свойство «name» к каждой метке, которую вы хотите отобразить красным жирным шрифтом, следующим образом.

 <property name="name">red_bold</property>
 

Это в сочетании с блоком CSS следующим образом приведет к желаемым результатам.

 #red_bold {
    color: red;
    font-weight: bold;
}
 

Кроме того, GTK4 предоставляет и дополнительное свойство, которое переопределяет имя элемента виджета с именем «css-name». Он будет добавлен как свойство к каждому виджету, который должен отображаться красным жирным шрифтом.

 <property name="css-name">redBOLD</property>
 

И связанный блок CSS будет составлен следующим образом.

 redBOLD {
    color: red;
    font-weight: bold;
}
 

Пожалуйста, обратите внимание, что имена, которые я выбрал для имен свойств, были произвольными и просто именами, которые описывали, какой эффект создавался.

Прилагается пример отображения, в котором я использовал свойство имени «red_bold».

Я надеюсь, что это дает вам четкое объяснение и некоторые варианты настройки ваших виджетов с помощью CSS.

С уважением,

Крейг