如何在GtkTreeView中交替亮/黑行？ [英] How to alternate light/dark rows in GtkTreeView?

问题描述

我已经阅读并尝试了现有的解决方案，但我无法让他们工作。我希望有人能指出我做错了什么，或者告诉我为什么这些解决方案不再有效。

• https://thegnomejournal.wordpress.com/2011/03/15/styling-gtk-with-css/ （5岁）


• 使用gtk列出文件的小工具（2年旧）


• 你如何改变pygtk中gtk.TreeView的交替背景行颜色？（4岁）
https://askubuntu.com/questions/285559 / how-to-reenable-alternating-grey-lines-in-nautilus-files-3-6-list-view （3岁）

我想确定这些解决方案没有奏效，所以我做了一个风格如下所示：

  GtkTreeView row {
 color：#FFFFFF; 
 background-color：＃FF0000; 
} 
 GtkTreeView row：nth-​​child（偶数）{
 background-color：＃FF00FF; 
} 
 GtkTreeView row：nth-​​child（odd）{
 background-color：＃00FFFF; 
} 
  

带有花色，只是为了让行色的差异真的很明显。然后，我做了一个小应用程序来加载树视图：

  #include< gtk / gtk.h> 
 
 int main（int argc，char * argv []）
 {
 int i; 
 gtk_init（& argc，& argv）; 
 // GtkBuilder * b = gtk_builder_new_from_file（derp.glade.xml）; 
 GtkWidget * top = gtk_window_new（GTK_WINDOW_TOPLEVEL）; 
 GtkListStore * items = gtk_list_store_new（2，
 G_TYPE_STRING，
 G_TYPE_STRING）; 
 
 GtkWidget * view = gtk_tree_view_new_with_model（GTK_TREE_MODEL（items））; 
 gtk_tree_view_insert_column_with_attributes 
（GTK_TREE_VIEW（view），
 0，
Herp，
 gtk_cell_renderer_text_new（），
text，0，
 NULL）; 
 gtk_tree_view_insert_column_with_attributes 
（GTK_TREE_VIEW（view），
 1，
Derp，
 gtk_cell_renderer_text_new（），
text，1，
 NULL）; 
 gtk_container_add（GTK_CONTAINER（top），view）; 
 GtkCssProvider * prov = gtk_css_provider_new（）; 
 gtk_css_provider_load_from_path 
（prov，
derp.css，
 NULL）; 
 gtk_style_context_add_provider 
（gtk_widget_get_style_context（view），
 GTK_STYLE_PROVIDER（prov），
 GTK_STYLE_PROVIDER_PRIORITY_APPLICATION）; 
 
 GtkTreeIter iter; 
 gtk_tree_model_get_iter_first（GTK_TREE_MODEL（items），& iter）; （i = 0; i <3; ++ i）{
 gtk_list_store_insert_with_values 
（项目，&iter，0，
 0，行）的
 
， ，
 1，行，
 -1）; 
} 
 gtk_widget_show_all（top）; 
 gtk_main（）; 
返回0; 
 
 $ / code $ / $ p 
 
 $ p编入： 
 
 
  gcc -o test teststyle.c`pkg-config gtk + -3.0 --cflags --libs` 
  
当我运行应用程序时，三行以＃00FFFF作为背景颜色显示。他们不交替。它们只采用行：第n个孩子（奇数）部分的颜色，甚至偶数行也采用该颜色。乱七八糟的CSS文件也可以做一些有趣的事情。切换奇数和偶数，例如：
 
 
  GtkTreeView row {
 color：#FFFFFF; 
 background-color：＃FF0000; 
} 
 GtkTreeView row：nth-​​child（odd）{
 background-color：＃FF00FF; 
} 
 GtkTreeView row：nth-​​child（偶数）{
 background-color：＃00FFFF; 
} 
  
现在所有行显示为＃FF00FF，没有任何变化。我认为GTK完全不能读取伪类，不小心把GtkTreeView行：nth-​​child（odd）变成了GtkTreeView行，完全错过了n-child（even）选择器。如果我删除奇数选择器并且只有偶数：
 
 
  GtkTreeView row {
 color：#FFFFFF; 
 background-color：＃FF0000; 
} 
 GtkTreeView row：nth-​​child（偶数）{
 background-color：＃FF00FF; 
 
 
 
 $ b现在它的背景颜色是＃FF0000，所以它忽略了（偶数）规则完全。
 
 
 
我试着在树视图中设置规则提示，除了抱怨设置规则提示已被弃用之外，它没有做任何事情。我在基本的Arch系统上使用GTK 3.18.9，XFCE作为窗口管理器。我在这里做错了什么？或者是我的GTK版本搞砸了，不知何故？       > 
 
 
  GtkTreeView row：nth-​​child（odd）{
 background-color：＃FF00FF; 
} 
 GtkTreeView row：nth-​​child（偶数）{
 background-color：＃00FFFF; 
} 
  
以下是python中的一个示例，在回答之前测试完毕
 ＃！/ usr / bin / env python3 
＃ -  *  -  coding：ISO-8859-1  -  *  -  
 import gi 
 gi.require_version（'Gtk'，'3.0'）
 from gi.repository import gtk 
 from gi.repository import Gdk 
 
 window = Gtk.Window （）
 window.connect（destroy，lambda q：Gtk.main_quit（））
 
 liststore = Gtk.ListStore（str，int）
 liststore.append（[ [Oranges，5]）
 liststore.append（[Apples，3]）
 liststore.append（[Bananas，1]）$ ​​b $ b liststore.append（[Tomatoes ，4]）
 liststore.append（[Cucumber，1]）$ ​​b $ b liststore.append（[potatoes，10]）
 liststore.append（[apricot， 100]）
 
 treeview = Gtk.TreeView（model = liststore）
 treeview.set_rules_hint（True）
 window.add（treeview）
 
 treeviewcolumn = Gtk.TreeViewColumn（Item）
 treeview.append_column（treeviewcolumn）
 cellrenderertext = Gtk.CellRendererText（）
 treeviewcolumn.pa ck_start（cellrenderertext，True）
 treeviewcolumn.add_attribute（cellrenderertext，text，0）
 
 treeviewcolumn = Gtk.TreeViewColumn（Quantity）
 treeview.append_column（treeviewcolumn） 
 cellrenderertext = Gtk.CellRendererText（）
 treeviewcolumn.pack_start（cellrenderertext，True）
 treeviewcolumn.add_attribute（cellrenderertext，text，1）
 css_provider = Gtk.CssProvider（） 
 css =
 / *字体在整个GtkTreeView上运行，不适用于选定的行* / 
 GtkTreeView {font-weight：bold; font：Sans 20; font-style：italic;} 
 GtkTreeView row：nth-​​child（偶数）{
 background-image：-gtk-gradient（线性，
左上角，
左下角，
 from（＃ 
 color-stop（0.5，darker（＃d0e4f7）），
 to（#fdffff））; 
} 
 GtkTreeView row：nth-​​child（odd）{
 background-image：-gtk-gradient（线性，
左上，
左下，
从（黄色），
颜色停止（0.5，较暗（黄色）），
到（#fdffff））; 
} 
 / *下一行只有边界动作操作* / 
 GtkTreeView：selected {color：white;背景：绿色; border-width：1px; border-color：black;} 
 / * Gtk.TreeViewColumn的下一行* / 
列标题.button {color：white;背景：purple;} 
 

 css_provider.load_from_data（css）
 screen = Gdk.Screen.get_default（）
 style_context = window.get_style_context（） 
 style_context.add_provider_for_screen（screen，css_provider，Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION）
 
 window.show_all（）
 
 Gtk.main（）
  
 
I have read, and tried the existing solutions for this question, and I can't get them to work. I was hoping someone could point out what I'm doing wrong, or tell me why those solutions aren't working anymore. 



https://thegnomejournal.wordpress.com/2011/03/15/styling-gtk-with-css/ (5 years old)
Widgets to list files with gtk (2 years old)
How do you change alternating background row colors of a gtk.TreeView in pygtk? (4 years old)
https://askubuntu.com/questions/285559/how-to-reenable-alternating-grey-lines-in-nautilus-files-3-6-list-view (3 years old)


I wanted to be sure these solutions weren't working, so I made a style sheet like this:
GtkTreeView row {
    color: #FFFFFF;
    background-color: #FF0000;
}
GtkTreeView row:nth-child(even) {
    background-color: #FF00FF;
}
GtkTreeView row:nth-child(odd) {
    background-color: #00FFFF;
}
with garish colors, just to make the difference in row color really obvious. Then, I made a little application to load up a tree view:
#include <gtk/gtk.h>

int main(int argc, char *argv[])
{
  int i;
  gtk_init(&argc,&argv);
  //GtkBuilder* b = gtk_builder_new_from_file("derp.glade.xml");
  GtkWidget* top = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  GtkListStore* items = gtk_list_store_new(2,
                                           G_TYPE_STRING,
                                           G_TYPE_STRING);

  GtkWidget* view = gtk_tree_view_new_with_model(GTK_TREE_MODEL(items));
  gtk_tree_view_insert_column_with_attributes
    (GTK_TREE_VIEW(view),
     0,
     "Herp",
     gtk_cell_renderer_text_new(),
     "text",0,
     NULL);
  gtk_tree_view_insert_column_with_attributes
    (GTK_TREE_VIEW(view),
     1,
     "Derp",
     gtk_cell_renderer_text_new(),
     "text",1,
     NULL);
  gtk_container_add(GTK_CONTAINER(top),view);
  GtkCssProvider* prov = gtk_css_provider_new();
  gtk_css_provider_load_from_path
    (prov,
    "derp.css",
     NULL);
  gtk_style_context_add_provider
    (gtk_widget_get_style_context(view),
     GTK_STYLE_PROVIDER(prov),
     GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);

  GtkTreeIter iter;
  gtk_tree_model_get_iter_first(GTK_TREE_MODEL(items),&iter);

  for(i=0;i<3;++i) {
    gtk_list_store_insert_with_values
      (items,&iter,0,
       0, "Row",
       1, "Row",
       -1);
  }
  gtk_widget_show_all(top);
  gtk_main();
  return 0;
}
compiled with:
gcc -o test teststyle.c `pkg-config gtk+-3.0 --cflags --libs`
When I run the application, the three rows display with #00FFFF as the background color. They don't alternate. They only take on the color from the "row:nth-child(odd)" section, and even the even rows take on that color. Messing with the css file can do some funny things too. Switching odd and even, for instance:
GtkTreeView row {
    color: #FFFFFF;
    background-color: #FF0000;
}
GtkTreeView row:nth-child(odd) {
    background-color: #FF00FF;
}
GtkTreeView row:nth-child(even) {
    background-color: #00FFFF;
}
Now all the rows display as #FF00FF, with no alternation. I think GTK is just completely failing to read the pseudo-classes somehow, accidentally turning "GtkTreeView row:nth-child(odd)" into "GtkTreeView row" and completely missing the "nth-child(even)" selector entirely. If I remove the odd selector and only have even:
GtkTreeView row {
    color: #FFFFFF;
    background-color: #FF0000;
}
GtkTreeView row:nth-child(even) {
    background-color: #FF00FF;
}
Now it's got a background color of #FF0000, so it's ignoring (even) rules entirely.

I tried setting the rules hint on the tree view, and it didn't do anything, other than complain that setting the rules hint was deprecated. I'm using GTK 3.18.9, on a basic Arch system, with XFCE as the window manager. Am I doing anything wrong here? Or is my version of GTK just messed up, somehow?
解决方案
I think only 2 blocks are enough something like these
GtkTreeView row:nth-child(odd) {
    background-color: #FF00FF;
}
GtkTreeView row:nth-child(even) {
    background-color: #00FFFF;
}
below an example in python, tested ok before answer
#!/usr/bin/env python3
# -*- coding: ISO-8859-1 -*-
import gi
gi.require_version('Gtk', '3.0')
from gi.repository import Gtk
from gi.repository import Gdk

window = Gtk.Window()
window.connect("destroy", lambda q: Gtk.main_quit())

liststore = Gtk.ListStore(str, int)
liststore.append(["Oranges", 5])
liststore.append(["Apples", 3])
liststore.append(["Bananas", 1])
liststore.append(["Tomatoes", 4])
liststore.append(["Cucumber", 1])
liststore.append(["potatoes", 10])
liststore.append(["apricot", 100])

treeview = Gtk.TreeView(model=liststore)
treeview.set_rules_hint( True )
window.add(treeview)

treeviewcolumn = Gtk.TreeViewColumn("Item")
treeview.append_column(treeviewcolumn)
cellrenderertext = Gtk.CellRendererText()
treeviewcolumn.pack_start(cellrenderertext, True)
treeviewcolumn.add_attribute(cellrenderertext, "text", 0)

treeviewcolumn = Gtk.TreeViewColumn("Quantity")
treeview.append_column(treeviewcolumn)
cellrenderertext = Gtk.CellRendererText()
treeviewcolumn.pack_start(cellrenderertext, True)
treeviewcolumn.add_attribute(cellrenderertext, "text", 1)
css_provider = Gtk.CssProvider()
css = """
                /* font operate on entire GtkTreeView not for selected row */
                GtkTreeView {font-weight: bold;font: Sans 20;font-style: italic;}
                GtkTreeView row:nth-child(even) {
                background-image: -gtk-gradient (linear,
                                                   left top,
                   left bottom,
                   from (#d0e4f7),
                   color-stop (0.5, darker (#d0e4f7)),
                   to (#fdffff));
                }
                GtkTreeView row:nth-child(odd) {
                background-image: -gtk-gradient (linear,
                                                   left top,
                   left bottom,
                   from (yellow),
                   color-stop (0.5, darker (yellow)),
                   to (#fdffff));
                }
                /* next line only border action operate */
                GtkTreeView:selected{color: white; background: green; border-width: 1px; border-color: black;}
                /* next line for Gtk.TreeViewColumn */
                column-header .button{color: white; background: purple;}

            """
css_provider.load_from_data(css)
screen = Gdk.Screen.get_default()
style_context = window.get_style_context()
style_context.add_provider_for_screen(screen, css_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)

window.show_all()

Gtk.main()


                        
这篇关于如何在GtkTreeView中交替亮/黑行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！