mzh/blog

[Gnome-Shell扩展制作指北]第三篇:图标与图片加载

看了题目你可能会奇怪,这有什么不同吗?其实,这里只是两种不同的加载方式。

图标

第一种是图标,或者叫icon,加载的方式是通过系统搜索整个主题库来加载这一图标文件。很难懂?没关系,在/usr/share/icons/下面有很多的图标是吧,那咱们就来加载 face-smile效果图 和上节课有神马不同呢: git diff Lesson_2 Lesson_3_Chapter_1

//…此处省略一些………
+const Gtk = imports.gi.Gtk;
@@ -17,7 +18,17 @@ ExampleIndicator.prototype = {
         PanelMenu.Button.prototype._init.call(this, St.Align.END);

         this.label = new St.Label({text:"This is Example"});
-        this.actor.add_actor(this.label);
+        this.label.add_style_class_name('example');
+        
+        //this.actor.add_actor(this.label);
+        
+        this.iconTheme = Gtk.IconTheme.get_default();
+        this._icon = new St.Icon({ icon_type: St.IconType.SYMBOLIC,
+                                    style_class: 'popup-menu-icon',
+                                    icon_name: 'face-smile',
+                                    icon_size: 26
+                                    });
+        this.actor.add_actor(this._icon);

         Main.panel._rightBox.add_actor(this.actor);
     },
//…此处又省略一些………

iconTheme = Gtk.IconTheme.get_default(),这里是告诉GTK主题系统去寻找当前的主题。也就是「主题设置会影响你的图标显示」。用户换了一个主题,你的图标也有可能改变哦。 你可能要问,如果要添加自定义的图标路径怎么办呢? 这也好办,跟Gtk主题说一声就行了: iconTheme.append_search_path (自定义的图标路径); St.Icon实例的基本组成:

这里要注意图标的命名,如果你选择了象征性的图标,就要在图标文件名后面加上”-symbolic”这样的后缀,例如:face-smile- symbolic.svg 这样加载图标确实很方便,特别是系统本身自带的那些图标上,但是要是加载图片时,总不可能把图片塞进主题里对吧。

CSS式加载图片

当然不只是换了个图片,让我们看看它和Chapter 1有神马区别。 git diff Lesson_3_Chapter_1 Lesson_3_Chapter_2 除了添加了一个新文件以外,实际上只有短短的8行:

+.example_icon{
+    background-image: url(pic/applications-science-symbolic.svg);
+    background-size: contain;
+    width:26px;
+    height:26px;
+}
+        //this.actor.add_actor(this._icon);
+        this._css_icon = new St.Bin({ style_class: "example_icon" });
+        this.actor.add_actor(this._css_icon);

如果你写过CSS,这些对你简直就是小儿科了。不过我还是想罗嗦一下: 首先我们添加了一个St.Bin(暂且把这当容器用吧),然后给这货添加了一个”example_icon”的类。并在css里定义了这个类的表现形式,和第二课里做的其实差不多吧。这和图标式加载有些许不同,那就是Bin的大小不受父级元素控制哦。 其实加载图片还有两种方法,不过我都不推荐:

当然你觉得好,你可以用哈~不过我觉得样式和程序分离是未来的设计趋势,再说了,CSS就是方便呗。

总结

本节我们学习了:

这样一来,大家就可以加载自己喜欢的GUI啦~