是否可以在自动完成弹出列表中显示图像（Gtk3）

Question

我正在使用m.route.mode = "pathname"; m.route(document.getElementById('app'), '/', { '/': main, '/modelling/:level': main }) 和Entry opbject，它具有EntryCompletion模型。 对于模型中的每条记录，都有一个我想在自动完成弹出列表中显示的图像。

如何做到这一点？ 是否可以在模型中添加ListStore列？

Answer 1

有趣的是我找不到任何这方面的例子，但事实证明这是可能的，而不是非常复杂。让我们从目标的一个小图像开始，该图像使用图标来说服原因。

那么我们如何到达那里，首先我们创建ListStore包含一个字符串匹配的列和一个icon-name转换为pixbuf（这也可以是pixbuf直接）。

    # Define the entries for the auto complete
    entries = [
        ('revert', 'document-revert'),
        ('delete', 'edit-delete'),
        ('dev help', 'devhelp'),
        ]

    # Setup the list store (Note that the data types should match those of the entries)
    list_store = Gtk.ListStore(str, str)

    # Fill the list store
    for entry_pair in entries:
        list_store.append(entry_pair)

下一步是设置EntryCompletion并将其与Liststore

相关联

    # Create the Entry Completion and link it to the list store
    completion = Gtk.EntryCompletion()
    completion.set_model(list_store)

现在神奇了，我们需要创建2个渲染器，一个用于文本，一个用于pixbuf。然后我们在完成中打包这些以向其添加列。

    # Create renderer's for the pixbufs and text
    image_renderer = Gtk.CellRendererPixbuf.new()
    cell_renderer = Gtk.CellRendererText.new()

    # Pack the columns in to the completion, in this case first the image then the string
    completion.pack_start(image_renderer, True)
    completion.pack_start(cell_renderer, True)

为了确保渲染器使用正确的列，我们在此指定渲染器中ListStore应该读取的列。对于image_renderer，我们设置icon_name属性，因为我们为其指定了图标名​​称。如果我们提供它Pixbuf，我们需要pixbuf代替。

    # Set up the renderer's such that the read the correct column
    completion.add_attribute(image_renderer, "icon_name", 1)
    completion.add_attribute(cell_renderer, "text", 0)

由于没有多列，我们需要告诉完成哪一列包含字符串。在我们的案例第0列中。

    # Tell the completion which column contains the strings to base the completion on
    completion.props.text_column = 0

    # Create the entry and link it to the completion
    entry = Gtk.Entry()
    entry.set_completion(completion)

就是这样！