GTK3中使用CSS最佳实践

GTK3中使用CSS最佳实践

ScaleButton的比例

我的项目 ​​https://gitee.com/dgwcode/gtk_training_design​​

在阅读了官方文档后,我有两个小部件的演示程序： GtkScaleButton,提供了刻度的控制, 还有  ​​​GtkVolumeButton 我只需要设置GtkScaleButton的样式，即使我为两个都设置了名称，也可以：​

需要注意的是:我们通过css 文件设置 需要指明 css 的 class 或者 #id

下面的代码 指明他的属性

gtk_widget_set_name（）

这是程序的图片：

下面我们写个代码实践下

C语言Code

#include void load_css ( void );GtkWidget *createWindow ( const gint width, const gint height, const gchar *const title );int main ( void ){ GtkWidget *window; GtkWidget *grid; GtkAdjustment *adjustment; GtkWidget *scale; GtkWidget *scaleButton; /// *** Initialize GTK and load CSS gtk_init ( NULL, NULL ); load_css(); /// *** Create a Window window = createWindow ( 300, 300, "ScaleButton" ); /// *** Create a Grid grid = gtk_grid_new(); gtk_container_add ( GTK_CONTAINER ( window ), grid ); /// *** Create an Adjustment adjustment = gtk_adjustment_new ( 0, 0, 10, 1, 2, 0 ); /// *** Create a Scale scale = gtk_scale_new ( GTK_ORIENTATION_HORIZONTAL, adjustment ); gtk_widget_set_name ( scale, "myScale" ); gtk_widget_set_size_request ( scale, 150, 40 ); g_object_set ( scale, "margin", 25, NULL ); /// *** Create a ScaleButton scaleButton = gtk_scale_button_new ( GTK_ICON_SIZE_DIALOG, 0, 5, 1, NULL ); gtk_widget_set_name ( scaleButton, "myScaleButton" ); gtk_widget_set_size_request ( scaleButton, 50, 50 ); g_object_set ( scaleButton, "margin", 25, NULL ); /// *** attach... gtk_grid_attach ( GTK_GRID ( grid ), scale, 0, 0, 1, 1 ); gtk_grid_attach ( GTK_GRID ( grid ), scaleButton, 0, 1, 1, 1 ); /// *** gtk_widget_show_all ( window ); gtk_main ();}void load_css ( void ){ GtkCssProvider *provider; GdkDisplay *display; GdkScreen *screen; /// *** const gchar *css_style_file = "style.css"; GFile *css_fp = g_file_new_for_path ( css_style_file ); GError *error = 0; /// *** provider = gtk_css_provider_new (); display = gdk_display_get_default (); screen = gdk_display_get_default_screen ( display ); /// *** gtk_style_context_add_provider_for_screen ( screen, GTK_STYLE_PROVIDER ( provider ), GTK_STYLE_PROVIDER_PRIORITY_APPLICATION ); gtk_css_provider_load_from_file ( provider, css_fp, &error ); /// ***}GtkWidget *createWindow ( const gint width, const gint height, const gchar *const title ){ GtkWidget *window; window = gtk_window_new ( GTK_WINDOW_TOPLEVEL ); gtk_window_set_title ( GTK_WINDOW ( window ), title ); g_signal_connect ( window, "destroy", gtk_main_quit, window ); gtk_window_set_default_size ( GTK_WINDOW ( window ), width, height ); gtk_container_set_border_width ( GTK_CONTAINER ( window ), 25 ); return window;}

css 代码

#myScaleButton{ background-color: red; border: 2px solid black;}#myScaleButton:hover{ background-color: green; border: 2px solid black;}scale{ background-color: black; color: yellow;}scale slider{ background-color: red; color: yellow;}scale > contents > trough { background-color: blue;}scale > contents > trough > highlight { background-color: red;}.flat{ background-color: magenta; color: yellow;}.image-button{ background-color: yellow; color: red;}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。