将Gtk.TreeView嵌入Gtk.ScrolledWindow后滚动条滑块比例异常

问题说明 #

把Gtk.TreeView嵌入Gtk.ScrolledWindow实现滚动功能时，遇到滚动条滑块比例失调（尺寸过大）的问题：TreeView当前仅显示3行，下方还有7行未展示，预期滑块比例应为1/3，但实际滑块大小不符合预期。鼠标滚轮和键盘箭头键的滚动功能正常，手动修改滚动条页面大小也无法解决该问题。

最小复现代码 #

import gi
gi.require_version('Gtk', '3.0')
from gi.repository import Gtk

class TreeViewScrollIssue(Gtk.Window):
    def __init__(self):
        Gtk.Window.__init__(self, title="TreeView Scroll Issue")
        self.set_default_size(200, 100)

        scrolled_window = Gtk.ScrolledWindow()
        scrolled_window.set_policy(Gtk.PolicyType.AUTOMATIC, Gtk.PolicyType.AUTOMATIC)
        self.add(scrolled_window)

        liststore = Gtk.ListStore(str)
        # 添加10行数据，仅显示3行
        for i in range(10):
            liststore.append([f"Row {i+1}"])

        treeview = Gtk.TreeView(model=liststore)
        renderer = Gtk.CellRendererText()
        column = Gtk.TreeViewColumn("Rows", renderer, text=0)
        treeview.append_column(column)

        scrolled_window.add(treeview)

win = TreeViewScrollIssue()
win.connect("destroy", Gtk.main_quit)
win.show_all()
Gtk.main()

解决方法 #

通过内嵌CSS设置滚动条滑块（slider）和滑道（trough）的最小尺寸，让滚动条能正确计算滑块比例。修改后的完整代码如下：

import gi
gi.require_version('Gtk', '3.0')
from gi.repository import Gtk, Gdk

class TreeViewScrollFix(Gtk.Window):
    def __init__(self):
        Gtk.Window.__init__(self, title="TreeView Scroll Fix")
        self.set_default_size(200, 100)

        # 加载CSS修复滚动条滑块比例
        css_provider = Gtk.CssProvider()
        css_style = """
        scrollbar slider {
            min-height: 20px;
        }
        scrollbar trough {
            min-height: 80px;
        }
        """
        css_provider.load_from_data(css_style.encode())
        Gtk.StyleContext.add_provider_for_screen(
            Gdk.Screen.get_default(),
            css_provider,
            Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
        )

        scrolled_window = Gtk.ScrolledWindow()
        scrolled_window.set_policy(Gtk.PolicyType.AUTOMATIC, Gtk.PolicyType.AUTOMATIC)
        self.add(scrolled_window)

        liststore = Gtk.ListStore(str)
        for i in range(10):
            liststore.append([f"Row {i+1}"])

        treeview = Gtk.TreeView(model=liststore)
        renderer = Gtk.CellRendererText()
        column = Gtk.TreeViewColumn("Rows", renderer, text=0)
        treeview.append_column(column)

        scrolled_window.add(treeview)

win = TreeViewScrollFix()
win.connect("destroy", Gtk.main_quit)
win.show_all()
Gtk.main()

原理说明 #

限制滑块的最小高度，避免因TreeView显示行数较少导致滑块被过度拉伸；同时设置滑道的最小高度，让滚动条能基于TreeView的实际内容高度计算滑块比例，最终使滑块尺寸符合预期。

内容的提问来源于stack exchange，提问作者jcoppens