带有CSS的GtkProgressBar用于进度颜色不起作用 [英] GtkProgressBar with CSS for progress colour not functioning
问题描述
我无法使用CSS更改GtkProgressBar中的progress元素的颜色.我尝试了不同的组合以引用此进度条，例如以下内容，但无济于事.我已附加了一个最小的C程序示例，Glade文件和CSS文件，其中CSS尝试4当前处于活动状态，以证明除此进度条以外的所有元素均受到影响.
I am not able to change the colour of the progress element in the GtkProgressBar using CSS. I have tried different combinations to reference this progress bar such as the below but to no avail. I have attached a minimum example C program, Glade file and CSS file where CSS attempt 4 is currently active to demonstrate that all elements are affected except this progress bar.
/* attempt 1 */
#gtkprogressbar1 {
color: rgba(83,165,198,255);
background-color: rgba(83,165,198,255);
}
/* attempt 2 */
#progressbar * {
color: rgba(83,165,198,255);
background-color: rgba(83,165,198,255);
}
/* attempt 3 */
GtkProgressBar * {
color: rgba(83,165,198,255);
background-color: rgba(83,165,198,255);
}
/* attempt 4 */
* {
color: rgba(83,165,198,255);
background-color: rgba(83,165,198,255);
}
C程序:另存为progressbar.c
C Program: Save as progressbar.c
/* Compile as follows:
* gcc -o PROGRESS progressbar.c -g `pkg-config --cflags --libs gtk+-3.0 gmodule-2.0` -pthread `pkg-config --cflags --libs gtk+-3.0 gmodule-2.0` -export-dynamic
*/
#include <gio/gio.h>
#include <gtk/gtk.h>
#include <stdlib.h>
#include <stdio.h>
#include <string.h>
typedef struct {
GtkWidget *button_on;
GtkWidget *progressbar1;
time_t time_start;
time_t time_finish;
} app_gui;
void set_progress_bar (app_gui *gui);
void adding_timer (app_gui *gui);
void set_css (void);
int main (int argc, char *argv[]) {
GtkBuilder *builder = g_slice_new (GtkBuilder);
GtkWidget *window;
GError *gtk_error = NULL;
app_gui *gui = g_slice_new (app_gui);
gui->time_start = time (NULL);
gui->time_finish = gui->time_start + 60; // 60 seconds progress bar
printf("%s%lu\n", "button click: Time start at button click is ", gui->time_start);
printf("%s%lu\n", "button click: Time finish at button click is ", gui->time_finish);
gtk_init (&argc, &argv);
set_css ();
builder = gtk_builder_new ();
if (!gtk_builder_add_from_file (builder, "progressbar_main.glade", NULL)) {
fprintf (stdout, "%s%s\n", "Error loading file with the reason: ", gtk_error->message);
g_free (gtk_error);
exit (EXIT_FAILURE);
}
window = GTK_WIDGET (gtk_builder_get_object (builder, "window_main"));
gui->button_on = GTK_WIDGET (gtk_builder_get_object (builder, "button_on"));
gui->progressbar1 = GTK_WIDGET (gtk_builder_get_object (builder, "progressbar1"));
gtk_builder_connect_signals (builder, gui);
g_object_unref (builder);
g_timeout_add_seconds_full (G_PRIORITY_DEFAULT_IDLE, 1, (GSourceFunc)set_progress_bar,
gui, (GDestroyNotify)adding_timer);
gtk_widget_show (window);
gtk_main ();
g_slice_free (app_gui, gui);
return 0;
}
void set_css (void) {
GtkCssProvider *css_provider;
GdkDisplay *display;
GdkScreen *screen;
const char *css_file = "style.css";
GError *error = NULL;
css_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 (css_provider),
GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
gtk_css_provider_load_from_file(css_provider, g_file_new_for_path (css_file), &error);
g_object_unref (css_provider);
}
void adding_timer (app_gui *gui) {
g_timeout_add_seconds_full (G_PRIORITY_DEFAULT_IDLE, 1, (GSourceFunc)set_progress_bar,
gui, (GDestroyNotify)adding_timer);
}
void set_progress_bar (app_gui *gui) {
time_t time_now = time (NULL);
double progress = 1.00 - (((gui->time_finish * 1.0) - time_now)/60.0);
printf("%s%f\n", "set progress: Progress is ", progress);
if (progress >= 1.00) {
EXIT_SUCCESS;
}
gtk_progress_bar_set_fraction (GTK_PROGRESS_BAR (gui->progressbar1), progress);
}
void on_window_main_destroy () {
gtk_main_quit ();
}
glade文件:另存为progressbar_main.glade
Glade File: Save as progressbar_main.glade
<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.18.3 -->
<interface>
<requires lib="gtk+" version="3.12"/>
<object class="GtkWindow" id="window_main">
<property name="can_focus">False</property>
<signal name="destroy" handler="on_window_main_destroy" swapped="no"/>
<child>
<object class="GtkFixed" id="fixed1">
<property name="visible">True</property>
<property name="can_focus">False</property>
<child>
<object class="GtkButton" id="button_on">
<property name="label" translatable="yes">ON</property>
<property name="width_request">100</property>
<property name="height_request">80</property>
<property name="visible">True</property>
<property name="can_focus">True</property>
<property name="receives_default">True</property>
</object>
<packing>
<property name="x">48</property>
<property name="y">75</property>
</packing>
</child>
<child>
<object class="GtkViewport" id="viewport1">
<property name="width_request">200</property>
<property name="height_request">80</property>
<property name="visible">True</property>
<property name="can_focus">False</property>
<child>
<object class="GtkTextView" id="textview1">
<property name="visible">True</property>
<property name="can_focus">True</property>
</object>
</child>
</object>
<packing>
<property name="x">201</property>
<property name="y">75</property>
</packing>
</child>
<child>
<object class="GtkProgressBar" id="progressbar1">
<property name="width_request">200</property>
<property name="height_request">-1</property>
<property name="visible">True</property>
<property name="can_focus">False</property>
</object>
<packing>
<property name="x">53</property>
<property name="y">31</property>
</packing>
</child>
</object>
</child>
</object>
</interface>
CSS文件:另存为style.css
CSS File: Save as style.css
* {
color: rgba(83,165,198,255);
background-color: rgba(83,165,198,255);
}
感谢您提供的任何帮助.
Thank you for any assistance offered.
推荐答案
所有选择ProgressBar小部件的尝试都是错误的:
All of your attempts to select the ProgressBar widget are wrong:
- 在您的UI文件中，
progressbar1是id，而不是name，而Glade的name用作CSS ID.令人困惑，对不对?无论如何，它不是gtkprogressbar1，因此无论如何都无法正常工作. - 一个ID，例如
#widgetclass，例如GTK +从未使用#progressbar，因为CSS ID是按元素而不是按类的，并且每个进程只有一个小部件应具有相同的CSS名称，但是所有GtkProgressBars都可以采用这种假设. -
GtkProgressBar样式名称是旧样式，版本早于3.18ish，并且我认为您没有使用过旧的版本(但是如果您使用的话，可以尝试替换它).
- In your UI file,
progressbar1is theid, not thename, and it's Glade'snamethat gets used as the CSS ID. Confusing, right? Anyway, it's notgtkprogressbar1, so that wouldn't work regardless. - An ID like
#widgetclass, e.g.#progressbar, is never used by GTK+ as the CSS ID is per-element, not per-class, and only one widget per process should have the same CSS name, but all GtkProgressBars would in this hypothetical. GtkProgressBarstyle names are the old style, pre 3.18ish, and I presume you're not using so old a version (but you can try substituting it if you are).
到目前为止，CSS节点名称是 progressbar ，而不是 GtkProgressBar .相同的模式也适用于其他小部件:现在，所有名为 GtkWhatever 的节点现在通常都被命名为 whatever ，但有一些次要的例外(例如， GtkListBox 是列表).
The CSS node name, as of now, is progressbar, not GtkProgressBar. The same pattern applies to other widgets: all nodes named GtkWhatever are now named whatever generally, with a few minor exceptions (e.g. GtkListBox is list).
所以这是一个问题.第二个是您尝试更改颜色的尝试没有使用足够具体的选择器，因此被您正在使用的主题覆盖，而不是使用比 * 更具体的选择器-也就是说:所有这些
So that's one problem. Your second is that your attempts to change the colour are not using specific enough selectors and therefore are being overridden by whatever theme you're using applying more specific selectors than * - which is to say: all of them.
即使您的颜色以这种方式生效，也必须将其应用于整个小部件，这显然是错误的.
Even if your colour would take effect this way, it would have to apply to the whole widget, which is obviously wrong.
阅读文档以了解适当的CSS节点名称和层次结构，然后选择更具体的内容，例如:
Read the documentation to learn the proper CSS node names and hierarchies, and select on something more specific, e.g.:
progressbar > trough > progress
是最具体的变体.
也就是说，如果您希望简洁起见，我只运行了 gtk3-widget-factory ，发现这足以为 progress 填充节点设置样式:
That said, if you prefer brevity, I just ran gtk3-widget-factory and found this to be sufficient to style the progress fill node:
progressbar progress {
background-color: rgba(83, 165, 198, 255);
}
所以，是的:仅凭 progressbar 进行选择会产生错误的结果，因为您不够具体.这就是为什么我们需要单独的CSS节点，以及为什么要记录节点层次的原因！
So, yes: just selecting on progressbar alone produces wrong results because you're not being specific enough. That's why we need separate CSS nodes and why the node hierarchy is documented!
这篇关于带有CSS的GtkProgressBar用于进度颜色不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
