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

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

  •  5
  • Omer Naveed  · 技术社区  · 7 年前

    我试图在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 回复  |  直到 7 年前
        1
  •  4
  •   Jens Mühlenhoff    7 年前

    您在同一个文件中混合了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

        2
  •  -1
  •   aventurin    5 年前

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

    然后编译