GTK4 设置 GtkInfoBar背景颜色

Posted 2021-11-22 从善若水

文章目录

• GTK4 设置 GtkInfoBar背景颜色
• • 一、失败的尝试
  • 二、换个思路
  • • 2.1 使用 GtkMessageType “GTK_MESSAGE_OTHER”来实现需求
    • 2.2 任意GtkMessageType 下获取 infobar的孙子控件box设置CSS

GTK4 设置 GtkInfoBar背景颜色

一、失败的尝试

最近使用GTK4开发应用，发现使用CSS无法改变GtkInfoBar的背景颜色，查看了源码中GtkInfoBar的CSS层级，如下：

/**************
 * GtkInfoBar *
 **************/
infobar {
  > revealer > box {
    padding: 8px;
    border-spacing: 12px;
  }

  &.action:hover > revealer > box {
      background-color: if($variant == 'light', desaturate(lighten(invert($selected_bg_color), 47%), 30%),
                        desaturate(darken(invert($selected_bg_color), 42%), 70%));
  }

  &.info,
  &.question,
  &.warning,
  &.error {
    > revealer > box {
      border-bottom: 1px solid lighten($borders_color, 5%);
      background-color: if($variant == 'light', desaturate(lighten(invert($selected_bg_color), 45%), 30%),
                        desaturate(darken(invert($selected_bg_color), 40%), 70%));
    }
  }
}

在GTK4 code中创建 CssProvider给GtkInfoBar添加 Style Context，如下：

......
const char* css="infobar.info > revealer > box {background:#F00;}";

GtkCssProvider *cssProvider = gtk_css_provider_new();
gtk_css_provider_load_from_data(cssProvider,css,-1);
        
GtkWidget *bar = gtk_info_bar_new ();
gtk_style_context_add_provider(gtk_widget_get_style_context(bar),
                               GTK_STYLE_PROVIDER(cssProvider),
                               GTK_STYLE_PROVIDER_PRIORITY_USER);
gtk_box_append (GTK_BOX (vbox), bar); //vbox是window的child
gtk_info_bar_set_message_type (GTK_INFO_BAR (bar), GTK_MESSAGE_INFO);
GtkWidget *label = gtk_label_new ("This is an info bar with message type GTK_MESSAGE_INFO");
gtk_info_bar_add_child (GTK_INFO_BAR (bar), label);
......

结果如下图：

使用GtkInspector查看 发现GtkInfoBar的CSS修改无效：

有知道怎么修改的同学一定要告诉我，我是一个CSS小白
有知道怎么修改的同学一定要告诉我，我是一个CSS小白
有知道怎么修改的同学一定要告诉我，我是一个CSS小白

二、换个思路

2.1 使用 GtkMessageType “GTK_MESSAGE_OTHER”来实现需求

我们发现GTK4 只对 info、warning、error、question设置了CSS，没有对other设置CSS，

所以我们可以通过设置 infobar的背景颜色来实现需求（其它消息类型即使设置了 infobar的背景颜色也会被它的子控件覆盖），如下code

......
const char* css="infobar {background:#F00;}";

GtkCssProvider *cssProvider = gtk_css_provider_new();
gtk_css_provider_load_from_data(cssProvider,css,-1);
        
GtkWidget *bar = gtk_info_bar_new ();
gtk_style_context_add_provider(gtk_widget_get_style_context(bar),
                               GTK_STYLE_PROVIDER(cssProvider),
                               GTK_STYLE_PROVIDER_PRIORITY_USER);
gtk_box_append (GTK_BOX (vbox), bar); //vbox是window的child
gtk_info_bar_set_message_type (GTK_INFO_BAR (bar), GTK_MESSAGE_OTHER);
GtkWidget *label = gtk_label_new ("This is an info bar with message type GTK_MESSAGE_INFO");
gtk_info_bar_add_child (GTK_INFO_BAR (bar), label);
......

结果如下图：

2.2 任意GtkMessageType 下获取 infobar的孙子控件box设置CSS

通过源码或者 GtkInspector可以清晰的看到InfoBar层级关系为：

GtkInfoBar–>GtkRevealer–>GtkBox

那么我们可以直接获取box控件设置其背景颜色，如下：

......
const char* css="box{background:#F00;}";

GtkCssProvider *cssProvider = gtk_css_provider_new();
gtk_css_provider_load_from_data(cssProvider,css,-1);
        
GtkWidget *bar = gtk_info_bar_new ();
GtkWidget *bar_reveal_box = gtk_widget_get_first_child(gtk_widget_get_first_child(bar));
gtk_style_context_add_provider(gtk_widget_get_style_context(bar_reveal_box),
                               GTK_STYLE_PROVIDER(cssProvider),
                               GTK_STYLE_PROVIDER_PRIORITY_USER);
gtk_box_append (GTK_BOX (vbox), bar); //vbox是window的child
gtk_info_bar_set_message_type (GTK_INFO_BAR (bar), GTK_MESSAGE_INFO);
GtkWidget *label = gtk_label_new ("This is an info bar with message type GTK_MESSAGE_INFO");
gtk_info_bar_add_child (GTK_INFO_BAR (bar), label);
......

效果如下图：

GtkInspector截图如下：

这种方式感觉不够专业，还是希望有知道怎么通过CSS直接修改的小伙伴告诉我

我是一个CSS小白
我是一个CSS小白
我是一个CSS小白

---