gtkmm给组件添加css

设置方式

使用CSS分为两步，1:为组件设这css名称，2:加载样式表。

样式表我们写在文件中就行（似乎也可以从字符串加载，不过不推荐）。

1. 设置css名称

1. 使用gtk的接口：gtk_widget_class_set_css_name()。
   • 这个接口用来给GType类型设置样式表，gtkmm中还没有封装C++的版本，比较难用，主要用于自定义组件。不是刚需，用后面的方法更简单。
2. Gtk::Widget::set_name()（对应于gtk_widget_set_name()）
   • 设置组件ID，给ID选择器用的。
3. Gtk::Widget::add_css_cladd()（对应于gtk_widget_class_set_css_name()
   • 设置组件类名，给类选择器用的。

gtk_widget_class_set_css_name()需要自定义类来使用，比较复杂，暂时不用。

2. 添加样式表文件

添加样式表需要使用Gkt::CssProvider这个类，将它作为类的成员。

4.9之前：

m_refCssProvider = Gtk::CssProvider::create();

Gtk::StyleContext::add_provider_for_display (
	get_display(),
	m_refCssProvider，
	GTK_STYLE_PROVIDER_PRIORITY_APPLICATION
);

m_refCssProvider->load_from_path ("custom_gtkmm.css");

这里就能加载样式表类。
不过实际中样式表可能出错，为了方便发现错误，我们需要处理parsing_error信号，打印错误位置和文件：

{
...
m_refCssProvider->signal_parsing_error().connect (
	    sigc::mem_fun (*this, &YouClas::on_parsing_error));
...
}

void YourClass::on_parsing_error (const Glib::RefPtr<const Gtk::CssSection> &section,
                                      const Glib::Error &error)
{
	std::cerr << "on_parsing_error(): " << error.what() << std::endl;
	if (section) {
		const auto file = section->get_file();
		if (file) {
			std::cerr << "  URI = " << file->get_uri() << std::endl;
		}
		
		auto start_location = section->get_start_location();
		auto end_location = section->get_end_location();
		std::cerr << "  start_line = " << start_location.get_lines() + 1
		          << ", end_line = " << end_location.get_lines() + 1 << std::endl;
		std::cerr << "  start_position = " << start_location.get_line_chars()
		          << ", end_position = " << end_location.get_line_chars() << std::endl;
	}
}

4.10开始，已经将Gtk::StyleContext::add_provider_for_display()改为Gtk::StyleProvider::add_provider_for_display ()。只用把前缀换一下就OK了。

可以用GTK_CHECK_VERSION宏来判断版本，来进行条件编译，例如：

GTKMM_CHECK_VERSION(4,9,1) // 具体用法自己看文档。

例子

用只有一个按钮的界面为例，

样式文件：custom.css，正常状态为蓝色，悬停变红色，点击变绿色。

button#mybutton{
    background-image: none;
    background-color: blue;
}

button#mybutton:hover{
    background-color: red;
}

button#mybutton:active{
    background-color: green;
}

重点来了，

1. 用get_css_name()方法可以获取组件的css名，是组件名，相当于html中的标签名。
2. 其中button就是Gtk::Button的组件名，相当于html的标签名。
3. mybutton是set_name()方法添加的id。这里用的交集选择器。
4. 按钮比较特殊，需要设置background-image: none才能看到background-color的效果，因为主题会给GtkButton设置背景图片。而且，按钮是一个容器，里面其实有一个GtkLabel，你可以用自选择器选中里面的GtkLabel（Gtk::Label）。

类选择器一样的，add_css_class_name()设置就OK。

样式的设置记住以下方法就OK了：

1. gtk_widget_class_set_css_name()
2. Gtk::Widget.set_name()
3. Gtk::Widget.add_css_class_name()
4. Gtk::Widget.get_css_name()

加载样式表：

1. Gtk::CssProvider::create()
2. Gtk::StyleContext::add_provider_for_display()和Gtk::StyleProvider::add_provider_for_display()
3. Gtk::CssProvider.load_from_path()
4. Gtk::CssProvider.signal_parsing_error()

代码

demo.h

#pragma once

#include <gtkmm.h>

class Demo : public Gtk::Window {
public:
	Demo();
private:
	void on_parsing_error (const Glib::RefPtr<const Gtk::CssSection> &section,
	    const Glib::Error &error);
	    
	Gtk::Button m_button;
	Glib::RefPtr<Gtk::CssProvider>m_refCssProvider;
};

demo.cpp

#include "demo.h"
#include<iostream>


Demo::Demo() :
	m_button ("this my button")
{
	//加载CSS文件
	m_refCssProvider = Gtk::CssProvider::create();
	Gtk::StyleContext::add_provider_for_display (
	    get_display(),
	    m_refCssProvider,
	    GTK_STYLE_PROVIDER_PRIORITY_APPLICATION
	);
	m_refCssProvider->signal_parsing_error().connect (
	    sigc::mem_fun (*this, &Demo::on_parsing_error)
	);
	m_refCssProvider->load_from_path ("custom.css");
	//CSS设置
	m_button.set_name ("mybutton");
	
	/*打印结果是button*/
	// std::cout << m_button.get_css_name() << std::endl;
	this->set_child (m_button);
}

void
Demo::on_parsing_error (const Glib::RefPtr <const Gtk::CssSection> &section,
                        const Glib::Error &error)
{
	std::cerr << "on_parsing_error(): " << error.what() << std::endl;
	if (section) {
		const auto file = section->get_file();
		if (file) {
			std::cerr << "  URI = " << file->get_uri() << std::endl;
		}
		
		auto start_location = section->get_start_location();
		auto end_location = section->get_end_location();
		std::cerr << "  start_line = " << start_location.get_lines() + 1
		          << ", end_line = " << end_location.get_lines() + 1 << std::endl;
		std::cerr << "  start_position = " << start_location.get_line_chars()
		          << ", end_position = " << end_location.get_line_chars() << std::endl;
	}
}

main.cpp

#include "demo.h"
#include <gtkmm/application.h>


int main (int argc, char **argv)
{
	auto app = Gtk::Application::create();
	
	return app->make_window_and_run <Demo> (argc, argv);
}