网站导航
> 文章列表 > gtkmm给组件添加css

gtkmm给组件添加css

网友: 文章列表 2024-03-21 21:53:55

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) // 具体用法自己看文档。

例子

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

gtkmm给组件添加css
样式文件：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);
}
网络标签：

相关问题