Question

我开始摆弄GTK +，直到我尝试修改旋转按钮小部件：

我没有完全理解答案，但我开始寻找CSS并尝试代码示例。最后，经过一些谷歌搜索和复制/粘贴代码，特别是从这里how to set a specific css class to a widget in gtk3? (c)，这是我设法做的没有语法或其他错误：

test.c的

#include <gtk/gtk.h>
#include <string.h>  

static void
activate (GtkApplication *app,
      gpointer        user_data)
{

  GtkStyleContext *context;
  GtkWidget *button_01;
  GtkWidget *button_02;
  button_01 = gtk_button_new_with_label("This is a simple button");
  button_02 = gtk_button_new_with_label("This is a stylish button");
  context = gtk_widget_get_style_context(button_02);
  gtk_style_context_add_class(context, "my_style");

  GtkWidget *window;
  GtkWidget * main_box;

  window = gtk_application_window_new (app);
  main_box = gtk_box_new (GTK_ORIENTATION_HORIZONTAL, 25);

  gtk_box_set_homogeneous (GTK_BOX (main_box), TRUE);
  gtk_container_add (GTK_CONTAINER (window), main_box);
  gtk_container_add (GTK_CONTAINER (main_box), button_01);
  gtk_container_add (GTK_CONTAINER (main_box), button_02);

  gtk_widget_show_all (window);
}

int
main (int    argc,
      char **argv)
{
  GtkApplication *app;
  int status;

  app = gtk_application_new ("org.gtk.example", G_APPLICATION_FLAGS_NONE);
  g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
  status = g_application_run (G_APPLICATION (app), argc, argv);
  g_object_unref (app);

  return status;
}

这是CSS文件：

my_style.css

.my_style{
    background: #669999;
    text-shadow: 1px 1px 5px black;
    border-radius: 3px;
    box-shadow: 0px 0px 5px black;
}

如果有人编译上面的代码，会出现一个包含两个按钮的窗口，根据css文件，一个按钮很时尚。 然而，这两个按钮似乎都是默认样式，就像忽略了my_style.css文件一样。

如果有人可以提供帮助，那将非常感激。

Answer 1

应用程序可以通过调用gtk_css_provider_load_from_file（）或gtk_css_provider_load_from_resource（）并使用gtk_style_context_add_provider（）或gtk_style_context_add_provider_for_screen（）添加提供程序，使GTK +解析特定的CSS样式表。以下对象用于实现样式：

GtkStyleContext 是一个对象，该对象存储影响GtkWidgetPath定义的窗口小部件的样式信息。为了构造最终的样式信息，GtkStyleContext从所有附加的GtkStyleProviders中查询信息。
GtkCssProvider 是实现GtkStyleProvider接口的对象。 GtkStyleProvider用于向GtkStyleContext提供样式信息
GtkCssProvider 是实现GtkStyleProvider接口的对象。它能够解析类似CSS的输入以便为小部件设置样式。

有关更多信息，https://developer.gnome.org/gtk3/stable/GtkCssProvider.html

代码如下：

viewDidLoad

CSS选择器简称为“按钮”，代码如下：

webView.scrollView.contentInsetAdjustmentBehavior = .never

Answer 2

对于所有在2020年进行搜索的人来说，这都是一个片段。可能会有一个快捷方式，但是只有当我为每个按钮设置不同的提供程序和上下文时，它才对我有用。将按钮添加到布局中即可查看。

GtkWidget *open, *plot, *save; //Buttons

GtkStyleContext *openContext, *plotContext, *saveContext; //attach css to buttons

GtkCssProvider *openProvider, *plotProvider, *saveProvider;//link to Css file

//Initialize buttons
    open = gtk_button_new_with_label("open\n");
    plot = gtk_button_new_with_label("plot\n");
    save = gtk_button_new_with_label("save\n");
    //Initialize buttons

    //Initialize contexts
openContext = gtk_widget_get_style_context(open);
plotContext = gtk_widget_get_style_context(plot);
saveContext = gtk_widget_get_style_context(save);
    //Initialize contexts

    //Initialize providers
openProvider = gtk_css_provider_new();
plotProvider = gtk_css_provider_new();
saveProvider = gtk_css_provider_new();
    //Initialize providers
//Add context providers and attach CSS
gtk_style_context_add_provider(openContext, GTK_STYLE_PROVIDER(openProvider),                               GTK_STYLE_PROVIDER_PRIORITY_USER);

gtk_style_context_add_provider(plotContext, GTK_STYLE_PROVIDER(plotProvider),                                   GTK_STYLE_PROVIDER_PRIORITY_USER);

gtk_style_context_add_provider(saveContext, GTK_STYLE_PROVIDER(saveProvider),                                   GTK_STYLE_PROVIDER_PRIORITY_USER);
    
gtk_style_context_add_class(openContext, "open");
gtk_style_context_add_class(plotContext, "plot");
gtk_style_context_add_class(saveContext, "save");
    //Add context providers and attach CSS


//add buttons to your GTKgrid or whatever layout

//这些是与我的程序位于同一目录中的单独的CSS文件

//openStyles.css
.open{
  background: #669999;
    text-shadow: 1px 1px 5px black;
    border-radius: 3px;
    box-shadow: 0px 0px 5px black;
}
.open:hover{
  background: #889898;
    text-shadow: 1px 1px 5px black;
    border-radius: 3px;
    box-shadow: 0px 0px 5px black;
}
//openStyles.css

//plotStyles.css
.plot{
  background: #666699;
    text-shadow: 1px 1px 5px black;
    border-radius: 3px;
    box-shadow: 0px 0px 5px black;
}
.plot:hover{
  background: #889898;
    text-shadow: 1px 1px 5px black;
    border-radius: 3px;
    box-shadow: 0px 0px 5px black;
}
//plotStyles.css

//saveStyles.css
.save{
  background: #669999;
    text-shadow: 1px 1px 5px black;
    border-radius: 3px;
    box-shadow: 0px 0px 5px black;
}
.save:hover{
  background: #889898;
    text-shadow: 1px 1px 5px black;
    border-radius: 3px;
    box-shadow: 0px 0px 5px black;
}
//saveStyles.css

如何将CSS应用于GTK +代码？

2 个答案: