如何将背景图像添加到 GTK TreeView？答案

【问题标题】：How do I add a background image to a GTK TreeView?如何将背景图像添加到 GTK TreeView？
【发布时间】：2011-03-21 16:53:40
【问题描述】：

我想要一个带有背景图像的 GTK TreeView，如下面的模型所示。

我找到了设置小部件背景颜色的方法，但似乎没有设置背景pixbuf或其他图像格式的方法。

我将 Python 与 PyGTK 结合使用，但任何具有 GTK 绑定的语言的答案都是可以接受的。

gtkTreeView 与背景图片的样机：

第一次尝试

根据 Jong Bor 的建议，我尝试了以下方法：

style = treeview.get_style().copy()
img_pixbuf = gtk.gdk.pixbuf_new_from_file(image_filename)
img_pixmap = img_pixbuf.render_pixmap_and_mask()[0]
for state in (gtk.STATE_NORMAL, gtk.STATE_ACTIVE, gtk.STATE_PRELIGHT,
              gtk.STATE_SELECTED, gtk.STATE_INSENSITIVE):
    style.bg_pixmap[state] = img_pixmap
treeview.set_style(style)

起初这似乎没有任何效果，但在我的TreeView 中选择一个项目后，我观察到以下内容：

背景的一部分'通过'选择行。

（请注意，我使用的是基于我的模型的背景图像，除了它有一些蓝色，用于测试目的）。

然后我激活了清除 TreeView 内容并重新绘制它的 GUI 的一部分，并观察到：

但是，一旦我向 TreeView 添加了一些东西，背景就会消失，所以我仍然不确定这是否朝着正确的方向发展。

【问题讨论】：

在填充树视图后调用 treeview.show_all() 是否使背景可见？另外，一个 hackish 建议：因为选择一行会使背景可见，所以执行 treeview.get_selection().select_all() 之类的操作来选择所有行。
@Jong show_all() 似乎没有效果。此外，除非整个 TreeView 已满，否则 select_all() 将无法显示背景，即使这样，界面也不再适用于用户。 :-/

标签： gtk pygtk gtktreeview

【解决方案1】：

我怀疑由于每个单元格都有一个控制其外观的渲染器，因此您必须以某种方式逐个单元格修改树视图。

无论如何，下面的代码可能值得一试（未经测试，不完整的代码）：

# Get the treeview's style
style = treeview.get_style().copy()

# Change the bg_pixmap attribute
#   It's an array with one pixbuf for every widget state, so
#   you probably want to replace each of the default 
#   pixmap's with your own image(s)
#   

style.bg_pixmap[0] = your_pixmap
style.bg_pixmap[1] = your_pixmap
style.bg_pixmap[2] = your_pixmap
style.bg_pixmap[3] = your_pixmap
style.bg_pixmap[4] = your_pixmap

# Set the modified style
treeview.set_style(style)

bg_pixmap 属性记录在 PyGTK reference 中。

我不确定数组位置如何映射到小部件状态。如果和c++中的一样，就是：

0 - STATE_NORMAL    
1 - STATE_ACTIVE    
2 - STATE_PRELIGHT  
3 - STATE_SELECTED  
4 - STATE_INSENSITIVE

【讨论】：

感谢您的建议。不幸的是，我尝试了这种方法，它没有任何明显的效果。我还尝试直接设置 bg_pixmap 值（而不是先复制样式并将其设置回小部件），但它也不起作用。我认为bg_pixmap 只影响窗口背景可见的小部件部分，但TreeView 小部件用白色填充覆盖窗口背景。
有点期待。在看到您的评论之前，我编辑了答案，暗示这确实是一个长镜头。由于每个单元格都有一个允许更改其外观的渲染器，因此一种蛮力方法是修改每个单元格的背景。除非对 Gtk 的内部工作有更深入了解的人可以阐明这个问题......
经过进一步调查，我发现设置 bg_pixmap 属性确实有一些效果。我将 bg_pixmap 数组中的每个值设置为我的图像的像素图，它会导致所选行的选择颜色成为我的图像的一部分。有时图像甚至会平铺显示为背景，但仅当 TreeView 为空时。我将在我的问题中添加屏幕截图。

【解决方案2】：

使用 GTK3 和 gtkmm 可以使用 CSS，但图像需要作为文件或资源提供。

这里我假设树视图是子类的：

class MyTreeView : public Gtk::TreeView { .. };

为你的 treeview 设置一个名称，然后为其添加 CSS 样式：

MyTreeView::MyTreeView () {

  set_name ("MyTreeView");
  auto css = Gtk::CssProvider::create ();
  auto sc  = get_style_context ();

  string path_to_img = "my-image.png";

  string css_data =
    ustring::compose (
                    "#MyTreeView  { background-image: url(\"%1\");"
                    "               background-repeat: no-repeat;"
                    "               background-position: 50%% 50%%;"
                    " }\n"
                    "#MyTreeView  .hide_bg { background-image: none; }",
                    path_to_img);

  try {
    css->load_from_data (css_data);
  } catch (Gtk::CssProviderError &e) {
    cout "error: attempted to set background image: " << path_to_img.c_str () << ": " << e.what () << endl;
  }

  auto screen = Gdk::Screen::get_default ();
  sc->add_provider_for_screen (screen, css, GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);

}

似乎也可以通过添加将行的背景设置为透明：

background: none;

到 CSS。

然后可以使用以下方法隐藏或显示背景图像：

if (!hide) {
  auto sc = get_style_context ();
  if (!sc->has_class ("hide_bg")) sc->add_class ("hide_bg");
} else {
  auto sc = get_style_context ();
  if (sc->has_class ("hide_bg")) sc->remove_class ("hide_bg");
}

【讨论】：