如何在 GTK Vala 中实现 CSS 样式？答案

【问题标题】：How to Implement CSS Styling in GTK Vala?如何在 GTK Vala 中实现 CSS 样式？
【发布时间】：2018-03-24 21:47:03
【问题描述】：

我正在尝试在 GTK 中为我的标签添加 CSS 样式，但我不知道如何设置文件。我目前在开头添加了一个包含，但我收到此错误：

我也不知道我是否正确地实现了这一点，对 GTK 编程来说非常新。有人可以帮我正确设置 CSS 实现吗？

#include<gtk/gtk.h>
public class MyApp : Gtk.Application {

  public MyApp() {
        Object (
              application_id: "com.github.omerntosi.gtkHangman",
              flags: ApplicationFlags.FLAGS_NONE
        );
  }

  protected override void activate() {
        var main_window = new Gtk.ApplicationWindow(this);
        main_window.set_default_size(1000,800);
        main_window.title = "GTK Hangman";

        var grid = new Gtk.Grid();
        grid.orientation = Gtk.Orientation.VERTICAL;
        grid.row_spacing = 6;

        var topHalf = new Gtk.Grid();
        topHalf.orientation = Gtk.Orientation.HORIZONTAL;
        grid.row_spacing = 6;

        var man = new Gtk.Image();
        man.set_from_file("../src/img/placeholder-500x350.png");
        topHalf.add(man);

        GtkCssProvider cssProvider = gtk_css_provider_new();
        gtk_css_provider_load_from_path(cssProvider, "style.css", NULL);
        gtk_style_context_add_provider_for_screen(gdk_screen_get_default(), GTK_STYLE_PROVIDER(cssProvider), GTK_STYLE_PROVIDER_PRIORITY_USER);

        var sol = new Gtk.Label("____ ______");
        sol.set_use_markup(true);
        topHalf.add(sol);

        grid.add(topHalf);
        main_window.add(grid);
        main_window.show_all();
  }

  public static int main(string[] args) {
        var app = new MyApp();
        return app.run(args);
  }
}

【问题讨论】：

哪种编程语言？ Python？ JavaScript？ C++（使用 GtkMM？）？这不是原生 GTK（用 C 编码）！
我的错，这是在瓦拉
请注意，根据 AFAIK，Vala 已经过时了。
是的，我明白这一点，但它仍然是推荐用于 Elementary OS 开发的主要语言，所以我想我会尝试一下。不过，我意识到要在上面实际找到文档是多么困难。
包含行不是有效的 Vala 代码，它是 C。摆脱它。

标签： css import gtk vala

【解决方案1】：

你在同一个文件中混合了 Vala 和 C，我已经将 C 部分翻译成 Vala：

删除了#include 指令。
将带有 Gtk.CssProvider 的 C 代码从 C 移植到 Vala

结果如下：

public class MyApp : Gtk.Application {

  public MyApp() {
        Object (
              application_id: "com.github.omerntosi.gtkHangman",
              flags: ApplicationFlags.FLAGS_NONE
        );
  }

  protected override void activate() {
        var main_window = new Gtk.ApplicationWindow(this);
        main_window.set_default_size(1000,800);
        main_window.title = "GTK Hangman";

        var grid = new Gtk.Grid();
        grid.orientation = Gtk.Orientation.VERTICAL;
        grid.row_spacing = 6;

        var topHalf = new Gtk.Grid();
        topHalf.orientation = Gtk.Orientation.HORIZONTAL;
        grid.row_spacing = 6;

        var man = new Gtk.Image();
        man.set_from_file("../src/img/placeholder-500x350.png");
        topHalf.add(man);

        Gtk.CssProvider css_provider = new Gtk.CssProvider ();
        css_provider.load_from_path ("style.css");
        Gtk.StyleContext.add_provider_for_screen (Gdk.Screen.get_default (), css_provider, Gtk.STYLE_PROVIDER_PRIORITY_USER);

        var sol = new Gtk.Label("____ ______");
        sol.set_use_markup(true);
        topHalf.add(sol);

        grid.add(topHalf);
        main_window.add(grid);
        main_window.show_all();
  }

  public static int main(string[] args) {
        var app = new MyApp();
        return app.run(args);
  }
}

使用--pkg gtk+-3.0 编译。这将修复有关缺少 gtk.h 等的编译器消息。如果没有，则说明您没有正确安装 GTK+ 3.0 标头（apt-get install libgtk-3-dev 包）。

Vala 在后台使用 pkg-config 工具将 CFLAGS 和 LDFLAGS 添加到 C 编译步骤，该步骤用于将 Vala 源文件编译为二进制文件。

生成的 C 文件将自动具有 #include <gtk/gtk.h>，因为它是在 vala 编译器附带的 gtk+-3.0.vapi 文件中指定的。

没有资源文件我无法测试它，但在这些更改之后它在这里编译得很好。

留下一个警告，因为代码没有在某处捕获GLib.Error，但您应该能够自己修复它。

这里还有另一个关于如何在 Vala 中使用 CSS 的代码示例：

https://stackoverflow.com/a/28465993/426242

【讨论】：

【解决方案2】：

您好，如果您想为一个组件设置样式，我找到了答案 1) 删除这个：

GtkCssProvider cssProvider = gtk_css_provider_new();
        gtk_css_provider_load_from_path(cssProvider, "style.css", NULL);
        gtk_style_context_add_provider_for_screen(gdk_screen_get_default(), GTK_STYLE_PROVIDER(cssProvider), GTK_STYLE_PROVIDER_PRIORITY_USER);

然后写：

var cssProvider = new Gtk.CssProvider ();
cssProvider.load_from_path ("yourcss.css");
sol.get_style_context ().add_provider (cssProvider, Gtk.STYLE_PROVIDER_PRIORITY_USER);

然后编译

【讨论】：