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

时间:2018-03-24 21:47:04

标签: css import gtk vala

我正在尝试在GTK中为我的标签添加CSS样式,但我无法弄清楚如何设置文件。我目前在开头添加了一个include,但是我收到了这个错误:

Include error

我也不知道我是否正确实现了这一点,对于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 个答案:

答案 0 :(得分:3)

你在同一档案中混合了Vala和C,我已将C部分翻译成Vala:

  • 删除了#include指令。
  • 将C代码与Gtk.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工具将CFLAGS和LDFLAGS添加到用于将Vala源文件编译为二进制文件的C编译步骤中。

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

我无法在没有资源文件的情况下对其进行测试,但在这些更改后,它可以在这里进行编译。

还有一个警告,因为代码没有在某个地方捕获GLib.Error,但您应该能够自己修复它。

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

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

答案 1 :(得分:-1)

您好,如果您想为一个组件设置样式,我找到了答案 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);

然后编译