Scrollbar 滚动条

Scrollbar 是 tkinter 里与其他元件搭配的“滚动条 ( 卷轴 )”，当某个元件的内容高度过长要卷动时，就可绑定 Scrollbar，让用户进行卷动浏览，这篇教学会介绍如何在 tkinter 视窗里加入 Scrollbar 滚动条。

快速导览：

• 视窗加入 Scrollbar 滚动条
• Text 多行输入框加入 Scrollbar 滚动条
• Listbox 列表选择框加入 Scrollbar 滚动条
• Canvas 加入 Scrollbar 滚动条

因为 Google Colab 不支援 tkinter，所以请使用本机环境 ( 参考：使用 Python 虚拟环境 ) 或使用 Anaconda Jupyter 进行实作 ( 参考：使用 Anaconda )。

视窗加入 Scrollbar 滚动条

建立 tkinter 视窗对象后，透过 Scrollbar 方法，就能在视窗对象或可以卷动的元件中加入 Scrollbar，必要的参数有一个，表示要加入的对象，建立 Scrollbar 滚动条后再使用 pack() 方法将其加入 ( 参考 pack 参数设定 )，下方的程序码执行后，会在主视窗的右边加入 Scrollbar。

import tkinter as tk

root = tk.Tk()
root.title('oxxo.studio')
root.geometry('200x200')

scrollbar = tk.Scrollbar(root)          # 建立滾動條
scrollbar.pack(side='right', fill='y')  # 將滾動條加在右側，垂直填滿

root.mainloop()

Text 多行输入框加入 Scrollbar 滚动条

如果要将 Text 多行输入框加入 Scrollbar 滚动条，需要先将 Text 和 Scrollbar 加入一个 Frame，并在这个 Frame 中互相绑定，就能做到滚动条卷动 Text 多行输入框内容的效果。

import tkinter as tk

root = tk.Tk()
root.title('oxxo.studio')
root.geometry('200x200')

frame = tk.Frame(root, height=10, width=15)   # 建立 Frame

scrollbar = tk.Scrollbar(frame)               # 將 Frame 裡放入 Scrollbar
scrollbar.pack(side='right', fill='y')        # 設定位置在右側，垂直填滿

# 在 Frame 裡放入 text，設定 yscrollcommand=scrollbar.set
text = tk.Text(frame, height=10, width=15, yscrollcommand=scrollbar.set)
text.pack()

scrollbar.config(command=text.yview)    # 設定 scrollbar 綁定 text 的 yview
frame.pack()

root.mainloop()

Listbox 列表选择框加入 Scrollbar 滚动条

Frame 框架默认宽高尺寸和内容的最大宽高相同，而最后呈现在视窗里的位置，则以 Frame 摆放的顺序来决定，以下方的程序码而言，虽然 Label1 比 Label2 早放入，但因为分别放在不同的 Frame 里，最后因为 Frame1 比较晚放到视窗里，呈现的结果就会摆在后方。

import tkinter as tk

root = tk.Tk()
root.title('oxxo.studio')
root.geometry('200x200')

frame = tk.Frame(root, width=15)        # 建立 Frame
frame.pack()

scrollbar = tk.Scrollbar(frame)         # 將 Frame 裡放入 Scrollbar
scrollbar.pack(side='right', fill='y')  # 設定位置在右側，垂直填滿

menu = tk.StringVar()
menu.set(('Apple','Banana','Orange','Grap','Papaya','Coconut','Pear','Nuts'))
# 在 Frame 中加入 Listbox 元件，設定 yscrollcommand=scrollbar.set
listbox = tk.Listbox(frame,  listvariable=menu, height=6, width=15, yscrollcommand=scrollbar.set)
listbox.pack(side='left', fill='y')    # 設定 Listbox 的位置以及填滿方式

scrollbar.config(command = listbox.yview)  # 設定 scrollbar 的 command = listbox.yview

root.mainloop()

Canvas 加入 Scrollbar 滚动条

如果要在 Canvas 里加入 Scrollbar，必须按照一定的程序撰写顺序，当中 canva.pack() 方法一定要放在最后才会出现滚动条，此外在设定 Canvas 时，也得指定 scrollregion(x1,y1,x2,y2)，scrollregion 表示 Canvas 要卷动的大小 ( 类似 Canvas 的实际大小 )，除了 Canvas，还要额外设定 Scrollbar 的 orient 参数，完成后就能替 Canvas 添加 Scrollbar。

import tkinter as tk

root = tk.Tk()
root.title('oxxo.studio')
root.geometry('400x400')

frame = tk.Frame(root, width=200, height=300)    # 使用 frame 裝載 Canvas
frame.pack()

# 設定 Canvas
canvas = tk.Canvas(frame, width=200, height=300, bg='#fff', scrollregion=(0,0,400,400))

canvas.create_rectangle(120, 10, 170, 100, width=8, fill='#f00')   # 在 Canvas 裡畫矩形

scrollX = tk.Scrollbar(frame, orient='horizontal')   # 水平捲軸放在 frame 裡
scrollX.pack(side='bottom', fill='x')                # 放在下面填滿 x 軸
scrollX.config(command=canvas.xview)                 # 綁定 Canvas x 方向

scrollY = tk.Scrollbar(frame, orient='vertical')     # 垂直捲軸放在 frame 裡
scrollY.pack(side='right', fill='y')                 # 放在右邊填滿 y 軸
scrollY.config(command=canvas.yview)                 # 綁定 Canvas y 方向

canvas.config(xscrollcommand=scrollX.set, yscrollcommand=scrollY.set)  # Canvas 綁定捲軸
canvas.pack(side='left')                             # Canvas 放在 frame 中的左側

root.mainloop()

意见反馈