本文旨在解决 Tkinter 中创建可滚动 Frame 的问题。我们将通过 Canvas 和 Scrollbar 结合的方式，实现当 Frame 内容超出窗口大小时，能够通过滚动条查看完整内容的功能。文章将提供详细的代码示例和步骤说明，帮助你轻松掌握 Tkinter 滚动条的用法。
实现可滚动 Frame 的步骤
在 Tkinter 中实现可滚动 Frame，通常需要借助 Canvas 和 Scrollbar 控件。基本思路是将需要滚动的 Frame 放入 Canvas 中，然后使用 Scrollbar 控制 Canvas 的滚动。
以下是实现步骤：
- 创建主窗口 (root)：这是 Tkinter 应用的基础。
- 创建包含 Canvas 的 Frame (checkFrame)：这个 Frame 用于容纳 Canvas 和 Scrollbar。
- 创建 Canvas (scrollCanvas)：这是实现滚动效果的关键。
- 创建 Scrollbar (gScrollbar)：用于控制 Canvas 的垂直滚动。
- 将 Scrollbar 与 Canvas 关联：通过 yscrollcommand 属性将 Scrollbar 与 Canvas 的垂直滚动关联起来。
- 创建 Frame (gChecksFrame) 放置在 Canvas 中：这个 Frame 将包含所有需要滚动的子控件。
- 使用 create_window 方法将 gChecksFrame 放入 Canvas：这是将 Frame 放入 Canvas 的关键步骤。
- 绑定 <Configure> 事件：当 gChecksFrame 的大小发生变化时，更新 Canvas 的 scrollregion，以确保滚动条能够正确工作。
代码示例
以下是一个完整的代码示例，演示了如何创建一个可滚动 Frame：
from tkinter import *
def addCheck(type, homeFrame):
'''adds a new row to the profile editor which allows the user to input a check'''
if type == 'g':
checkLength = 14
listLength = len(gCheckList)
elif type == 't':
checkLength = 9
listLength = len(tCheckList)
else:
checkLength = 0
checkFrame = Frame(homeFrame)
checkFrame.grid(row=2 + listLength,column=0,padx=10,pady=5)
checkName = Text(checkFrame, width=10, height=1, font=('Courier',12))
checkName.grid(row=0, column=0,padx=10,pady=5)
if type == 'g':
gCheckList.append(checkFrame)
elif type == 't':
tCheckList.append(checkFrame)
else:
return
homeFrame.update_idletasks()
return
#creates root
root = Tk()
root.title = 'Profile Editor'
# Suggest to remove root.geometry(...) because the window is not tall enough to show all the widgets.
#root.geometry('750x300+250+225')
#creates profile name frame
profileNameFrame = Frame(root)
profileNameFrame.grid(row=0,column=0,padx=10,pady=5)
#Creates a spot to name the profile
nameLabel = Label(profileNameFrame, text='Profile Name: ', font=('Courier',12))
nameLabel.grid(row=0,column=0,padx=10,pady=5)
nameText = Text(profileNameFrame, width=30, height=1, font=('Courier',12))
nameText.grid(row=0, column=1,padx=10,pady=5)
#Frame for title
titleFrame = Frame(root)
titleFrame.grid(row=1,column=0,padx=10,pady=5)
gCheckProfileLabel = Label(titleFrame, text='header', font=('Courier',14))
gCheckProfileLabel.grid(row=0,column=0,padx=10,pady=5)
#Frame for headers
headerFrame = Frame(titleFrame)
headerFrame.grid(row=1,column=0,padx=10,pady=5)
headerLabel = Label(headerFrame, text='Check Name Indicator '+''.join(['1 ', '2 ','3 ','4 ','5 ','6 ','7 ','8 ','9 ','10 ','11 ','12 ','13 ','14 ']), font=('Courier',12))
headerLabel.grid(row=0,column=0,padx=10,pady=5)
#frame for canvas
checkFrame = Frame(titleFrame)
checkFrame.grid(row=2,column=0,padx=5,pady=5, sticky='nw')
checkFrame.grid_rowconfigure(0,weight=1)
checkFrame.grid_columnconfigure(0,weight=1)
# don't call .grid_propagate(False)
#checkFrame.grid_propagate(False)
#canvas for scrollbar
scrollCanvas = Canvas(checkFrame, bg='yellow')
scrollCanvas.grid(row=0,column=0,sticky='news')
#link scrollbar to canvas
gScrollbar = Scrollbar(checkFrame, orient='vertical',command=scrollCanvas.yview)
gScrollbar.grid(row=0,column=1,sticky='ns')
scrollCanvas.configure(yscrollcommand=gScrollbar.set)
#Create frame to contain checks
gChecksFrame = Frame(scrollCanvas, bg='blue')
scrollCanvas.create_window((0,0),window=gChecksFrame, anchor='nw')
# don't call gChecksFrame.grid(...)
#gChecksFrame.grid(row=1,column=1,padx=10,pady=5)
# update canvas scrollregion whenever gChecksFrame is resized
gChecksFrame.bind("<Configure>", lambda e: scrollCanvas.config(scrollregion=scrollCanvas.bbox("all")))
#Creates a new check row to be added into the program
addGCheckButton = Button(titleFrame, text='+', font=('Courier',14), command=lambda: addCheck('g', gChecksFrame))
addGCheckButton.grid(row=0,column=2,padx=1,pady=5)
root.mainloop()代码解释
- checkFrame.grid_propagate(False)：这行代码阻止了 checkFrame 根据其子控件的大小自动调整大小。如果需要滚动条生效，应该注释掉这行代码，允许 checkFrame 根据内容自动调整大小。
- gChecksFrame.grid(...)：gChecksFrame 已经通过 scrollCanvas.create_window(...) 放入了 scrollCanvas 中，再次使用 grid 布局会导致问题。应该注释掉这行代码。
- gChecksFrame.bind("<Configure>", lambda e: scrollCanvas.config(scrollregion=scrollCanvas.bbox("all")))：这行代码绑定了 <Configure> 事件到 gChecksFrame。当 gChecksFrame 的大小发生变化时（例如，添加了新的子控件），会更新 scrollCanvas 的 scrollregion。scrollregion 定义了 Canvas 可以滚动的区域。scrollCanvas.bbox("all") 返回 Canvas 中所有内容的边界框，确保滚动条能够正确显示所有内容。
注意事项
- 确保 Canvas 的大小足够容纳 gChecksFrame，否则可能无法看到滚动条。
- 如果 gChecksFrame 的内容是动态添加的，一定要在每次添加内容后更新 scrollCanvas 的 scrollregion。
- 建议移除 root.geometry(...)，因为如果窗口高度不足以显示所有控件，可能会导致显示问题。让窗口根据内容自动调整大小。
总结
通过使用 Canvas 和 Scrollbar 控件，可以很容易地在 Tkinter 中实现可滚动 Frame。关键步骤包括将需要滚动的 Frame 放入 Canvas 中，并将 Scrollbar 与 Canvas 的滚动关联起来。同时，需要注意更新 Canvas 的 scrollregion，以确保滚动条能够正确工作。希望本文能够帮助你解决在 Tkinter 中创建可滚动 Frame 的问题。
