如何为填充按钮的tkinter Canvas添加滚动条并解决布局错乱问题

核心问题原因 #

• 滚动条父容器设置错误：你将滚动条的master设为Canvas本身，滚动条调用pack后会挤压Canvas的内部绘制区域，导致Canvas实际可用宽度远小于设置值，按钮布局直接溢出
• 未配置Canvas滚动区域：没有设置scrollregion属性，Canvas无法识别可滚动的内容范围，滚动功能无法生效
• Canvas添加子控件方式错误：直接对按钮调用place挂载到Canvas上，滚动时按钮不会跟随画布移动，需要用create_window方法挂载
• 按钮折行宽度未适配：添加滚动条后Canvas内容区域宽度需要扣除滚动条宽度，原按钮wraplength设置偏大导致文本折行异常

修正后可运行代码 #

import tkinter as tk

class tWindow(tk.Tk):
    frame = None
    canvas = None
    scrollbar = None

    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.geometry("640x480+50+50")
        self.setup_frame()
        self.setup_canvas()

    def setup_frame(self):
        self.frame = tk.Frame(master=self, width=640, height=480)
        self.frame.configure(bg="#003163")
        self.frame.place(x=0, y=0)

    def setup_canvas(self):
        self.update()
        # 滚动条和Canvas同层级放在frame里
        self.scrollbar = tk.Scrollbar(master=self.frame, orient=tk.VERTICAL)
        self.scrollbar.pack(side=tk.RIGHT, fill=tk.Y)
        
        canvas_width = int(self.frame.winfo_width() / 4)
        self.canvas = tk.Canvas(master=self.frame, bg="#006331",
            width=canvas_width, height=self.frame.winfo_height(),
            yscrollcommand=self.scrollbar.set)
        self.canvas.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)
        self.scrollbar.configure(command=self.canvas.yview)
        self.update()

        tmp_pos = 0
        # 按钮宽度扣除滚动条宽度，滚动条默认宽度约17px可根据需求调整
        btn_width = canvas_width - 17

        for i in range(20):
            btn_tmp = tk.Button(text=f"testing testing testing testing testing {i:02} ...",
                justify=tk.LEFT, wraplength=btn_width, bg="#00c0c0", fg="#000000")
            # 用create_window把按钮挂载到Canvas画布上
            self.canvas.create_window(0, tmp_pos, anchor=tk.NW, window=btn_tmp)
            self.update()
            tmp_pos = tmp_pos + btn_tmp.winfo_height()
        
        # 设置滚动区域为所有内容的范围
        self.canvas.configure(scrollregion=self.canvas.bbox("all"))

def main():
    app = tWindow()
    app.mainloop()

if __name__ == "__main__":
    main()

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