代码之家 › 专栏 › 技术社区 › Omer Naveed

如何在GTK Vala中实现CSS样式?

vala gtk import css

Omer Naveed · 技术社区 · 8 年前

我试图在GTK中为我的标签添加CSS样式,但我不知道如何设置文件。我当前在开头添加了一个include,但出现以下错误:

我也不知道我是否正确地实现了这一点,这对于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);
  }
}

2 回复 | 直到 8 年前

Jens Mühlenhoff 8 年前

您在同一个文件中混合了Vala和C,我已将C部分翻译为Vala:

已删除 #include 指令。
用Gtk移植了C代码。CssProvider从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 在C编译步骤中添加CFLAGS和LDFLAGS,该步骤用于将Vala源文件编译为二进制文件。

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

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

由于代码未捕获 GLib.Error 但你应该能自己解决。

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

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

-1

aventurin 6 年前

嗨,我找到了一个答案,如果你想设计一个组件 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);

然后编译