使用 python TKinter 创建 GUI 时如何将滚动条绑定到画布？

【问题标题】：How to bind a Scrollbar to Canvas when using python TKinter to create GUI?使用 python TKinter 创建 GUI 时如何将滚动条绑定到画布？
【发布时间】：2013-09-29 07:35:56
【问题描述】：

好吧，我想通过 Tkinter 方法用 python 创建一个 GUI。问题来了，我已经设法将滚动条绑定到 Canvas，但是滚动条不起作用，它无法控制 Canvas 中存在的内容，它没用。这里有人可能会帮我解决问题吗？感谢您的帮助和您所花费的时间。下面是原始代码。

from Tkinter import *
root=Tk()
root.title('Bit Exraction')
root.geometry('800x600')
cv_frameindex=  ['CV_F0','CV_F1','CV_F2','CV_F3','CV_F4','CV_F5','CV_F6','CV_F7','CV_F8','CV_F9','CV_F10','CV_F11','CV_F12','CV_F13','CV_F14','CV_F15','CV_F16','CV_F17','CV_F18','CV_F19',\
      'CV_F20','CV_F21','CV_F22','CV_F23','CV_F24','CV_F25','CV_F26','CV_F27','CV_F28','CV_F29','CV_F30','CV_F31','CV_F32','CV_F33','CV_F34','CV_F35','CV_F36','CV_F37','CV_F38','CV_F39',\
      'CV_F40','CV_F41','CV_F42','CV_F43','CV_F44','CV_F45','CV_F46','CV_F47','CV_F48','CV_F49','CV_F50','CV_F51','CV_F52','CV_F53','CV_F54','CV_F55','CV_F56','CV_F57','CV_F58','CV_F59',\
      'CV_F60','CV_F61','CV_F62','CV_F63','CV_F64','CV_F65','CV_F66','CV_F67','CV_F68','CV_F69','CV_F70','CV_F71','CV_F72','CV_F73','CV_F74','CV_F75','CV_F76','CV_F77','CV_F78','CV_F79'
      ]

 GPIO_index=['GPIO-0','GPIO-1','GPIO-2','GPIO-3','GPIO-4','GPIO-5','GPIO-6','GPIO-7','GPIO-8','GPIO-9','GPIO-10','GPIO-11','GPIO-12','GPIO-13','GPIO-14','GPIO-15','GPIO-16','GPIO-17','GPIO-18','GPIO-19',\
      'GPIO-20','GPIO-21','GPIO-22','GPIO-23','GPIO-24','GPIO-25','GPIO-26','GPIO-27','GPIO-28','GPIO-29','GPIO-30','GPIO-31','GPIO-32','GPIO-33','GPIO-34','GPIO-35','GPIO-36','GPIO-37','GPIO-38','GPIO-39',\
      'GPIO-40','GPIO-41','GPIO-42','GPIO-43','GPIO-44','GPIO-45','GPIO-46','GPIO-47','GPIO-48','GPIO-49','GPIO-50','GPIO-51','GPIO-52','GPIO-53','GPIO-54','GPIO-55','GPIO-56','GPIO-57','GPIO-58','GPIO-59',\
      'GPIO-60','GPIO-61','GPIO-62','GPIO-63','GPIO-64','GPIO-65','GPIO-66','GPIO-67','GPIO-68','GPIO-69','GPIO-70','GPIO-71','GPIO-72','GPIO-73','GPIO-74','GPIO-75','GPIO-76','GPIO-77','GPIO-78','GPIO-79'
      ]

 bak_index=['bak0','bak1','bak2','bak3','bak4','bak5','bak6','bak7','bak8','bak9','bak10','bak11','bak12','bak13','bak14','bak15','bak16','bak17','bak18','bak19',\
      'bak20','bak21','bak22','bak23','bak24','bak25','bak26','bak27','bak28','bak29','bak30','bak31','bak32','bak33','bak34','bak35','bak36','bak37','bak38','bak39',\
      'bak40','bak41','bak42','bak43','bak44','bak45','bak46','bak47','bak48','bak49','bak50','bak51','bak52','bak53','bak54','bak55','bak56','bak57','bak58','bak59',\
      'bak60','bak61','bak62','bak63','bak64','bak65','bak66','bak67','bak68','bak69','bak70','bak71','bak72','bak73','bak74','bak75','bak76','bak77','bak78','bak79'
      ]
 for i in range(80):
     bak_index[i]=[]


 t1=Frame(root,height=1,width=300)
 Label(t1,text='Use:  1-GPIO       O-Native\n',anchor='w',height=2,width=300).pack(side=LEFT, fill=Y)
 t1.pack(side=TOP,fill=Y)

 t2=Frame(root,height=1,width=300)
 Label(t2,text='I/O:  1-Output     O-Input\n',anchor='w',height=2,width=300).pack(side=LEFT, fill=Y)
 t2.pack(side=TOP,fill=Y)

 t3=Frame(root,height=1,width=300)
 Label(t3,text='H/L:  1-High       O-Low\n',anchor='w',height=2,width=300).pack(side=LEFT, fill=Y)
 t3.pack(side=TOP,fill=Y)

 t4=Frame(root,height=1,width=300)
 Label(t4,text='INV:  1-Invert     Input Value\n',anchor='w',height=2,width=300).pack(side=LEFT, fill=Y)
 t4.pack(side=TOP,fill=Y)

 t5=Frame(root,height=1,width=300)
 Label(t5,text='Pin Default Set As Native Function\n',anchor='w',height=2,width=300).pack(side=LEFT, fill=Y)
 t5.pack(side=TOP,fill=Y)

 t6=Frame(root,height=0,width=300)
 Label(t6,text='--'*90,anchor='w',height=1,width=300).pack(side=LEFT, fill=Y)
 t6.pack(side=TOP,fill=Y)



 t7=Frame(root,height=5,width=300)
 tt=Frame(t7,height=1,width=300)
 lb1=Label(tt, text='PIN',height=1,width=20,anchor=W).pack(side=LEFT, fill=Y)
 lb2=Label(tt, text='  USE',height=1,width=20,anchor=W).pack(side=LEFT, fill=Y)
 lb3=Label(tt, text='         I/O',height=1,width=20,anchor=W).pack(side=LEFT, fill=Y)
 lb4=Label(tt, text='               H/L',height=1,width=20,anchor=W).pack(side=LEFT, fill=Y)
 lb5=Label(tt, text='  INV',height=1,width=20,anchor=CENTER).pack(side=LEFT,fill=Y)
 tt.pack(side=TOP, fill=Y)
 tt1=Frame(t7,height=1,width=300)
 Label(tt1,text='--'*90,anchor='w',height=1,width=300).pack(side=LEFT, fill=Y)
 tt1.pack(side=TOP,fill=Y)
 t7.pack(side=TOP,fill=Y)

 cv=Canvas(root,height=30,width=30, scrollregion=(0,0,40,800),bg='red')
 S1=Scrollbar(cv,orient='vertical',command=cv.yview)
 cv['yscrollcommand']=S1.set
 S1.pack(side=RIGHT, fill=Y)
 cv.pack(side=TOP, fill=Y, expand=True)

 for j in range(80):
     cv_frameindex[j]=Frame(cv, height=10, width=10)
     bak_index[j].append(Label(cv_frameindex[j], text=GPIO_index[j], height=1, width=13, anchor=CENTER))
     bak_index[j].append(Label(cv_frameindex[j], text=' '*20, height=1, width=10, anchor=CENTER))
     bak_index[j].append(Checkbutton(cv_frameindex[j], text='0', state='active'))
     bak_index[j].append(Checkbutton(cv_frameindex[j], text='1', state='active'))
     bak_index[j].append(Label(cv_frameindex[j], text=' '*20, height=1, width=13, anchor=CENTER))
     bak_index[j].append(Checkbutton(cv_frameindex[j], text='0', state='active'))
     bak_index[j].append(Checkbutton(cv_frameindex[j], text='1', state='active'))
     bak_index[j].append(Label(cv_frameindex[j], text=' '*20, height=1, width=13, anchor=CENTER))
     bak_index[j].append(Checkbutton(cv_frameindex[j], text='0', state='active'))
     bak_index[j].append(Checkbutton(cv_frameindex[j], text='1', state='active'))
     bak_index[j].append(Label(cv_frameindex[j], text=' '*20, height=1, width=13, anchor=CENTER))
     bak_index[j].append(Checkbutton(cv_frameindex[j], text='0', state='active'))
     bak_index[j].append(Checkbutton(cv_frameindex[j], text='1', state='active'))
     bak_index[j].append(Label(cv_frameindex[j], text=' '*20, height=1, width=13, anchor=CENTER))
for k in bak_index:
    for i in range(len(k)):
        k[i].pack(side=LEFT,fill=Y)
for L in cv_frameindex:
    L.pack(side=TOP, fill=Y)

t8=Frame(cv, height=5, width=300)
Button(t8, text='Generate').pack(fill=Y)
t8.pack(side=TOP, fill=Y)

t9=Frame(cv, height=5, width=300)
Button(t9, text='Generate').pack(fill=Y)
t9.pack(side=TOP, fill=Y)
root.mainloop()

【问题讨论】：

  • 贴出的代码有缩进错误。

标签： python canvas tkinter scrollbar


【解决方案1】：

附加到画布的滚动条只会滚动画布中的项。使用pack 或grid 不会在画布中放置对象in。为此，您必须使用画布的create_window 方法。

如果您想创建一个滚动框架，您应该将所有标签和复选按钮放在一个框架中，然后使用cv.create_window(...) 将该单个框架添加到画布中。在这个网站和其他地方有几个例子说明如何做到这一点。

不幸的是，仅仅这样做不会使您的代码正常工作。您还有其他错误，例如您没有让画布在 X 方向上展开，因此它只有 30 像素宽。

我已调整您的代码以使其正常工作；密切关注与inner_frame相关的所有代码行：

from Tkinter import *
root=Tk()
root.title('Bit Exraction')
root.geometry('800x600')
cv_frameindex=  ['CV_F0','CV_F1','CV_F2','CV_F3','CV_F4','CV_F5','CV_F6',
                 'CV_F7','CV_F8','CV_F9','CV_F10','CV_F11','CV_F12','CV_F13',
                 'CV_F14','CV_F15','CV_F16','CV_F17','CV_F18','CV_F19','CV_F20',
                 'CV_F21','CV_F22','CV_F23','CV_F24','CV_F25','CV_F26','CV_F27',
                 'CV_F28','CV_F29','CV_F30','CV_F31','CV_F32','CV_F33','CV_F34',
                 'CV_F35','CV_F36','CV_F37','CV_F38','CV_F39','CV_F40','CV_F41',
                 'CV_F42','CV_F43','CV_F44','CV_F45','CV_F46','CV_F47','CV_F48',
                 'CV_F49','CV_F50','CV_F51','CV_F52','CV_F53','CV_F54','CV_F55',
                 'CV_F56','CV_F57','CV_F58','CV_F59','CV_F60','CV_F61','CV_F62',
                 'CV_F63','CV_F64','CV_F65','CV_F66','CV_F67','CV_F68','CV_F69',
                 'CV_F70','CV_F71','CV_F72','CV_F73','CV_F74','CV_F75','CV_F76',
                 'CV_F77','CV_F78','CV_F79']

GPIO_index=['GPIO-0','GPIO-1','GPIO-2','GPIO-3','GPIO-4','GPIO-5','GPIO-6',
            'GPIO-7','GPIO-8','GPIO-9','GPIO-10','GPIO-11','GPIO-12','GPIO-13',
            'GPIO-14','GPIO-15','GPIO-16','GPIO-17','GPIO-18','GPIO-19','GPIO-20',
            'GPIO-21','GPIO-22','GPIO-23','GPIO-24','GPIO-25','GPIO-26','GPIO-27',
            'GPIO-28','GPIO-29','GPIO-30','GPIO-31','GPIO-32','GPIO-33','GPIO-34',
            'GPIO-35','GPIO-36','GPIO-37','GPIO-38','GPIO-39','GPIO-40','GPIO-41',
            'GPIO-42','GPIO-43','GPIO-44','GPIO-45','GPIO-46','GPIO-47','GPIO-48',
            'GPIO-49','GPIO-50','GPIO-51','GPIO-52','GPIO-53','GPIO-54','GPIO-55',
            'GPIO-56','GPIO-57','GPIO-58','GPIO-59','GPIO-60','GPIO-61','GPIO-62',
            'GPIO-63','GPIO-64','GPIO-65','GPIO-66','GPIO-67','GPIO-68','GPIO-69',
            'GPIO-70','GPIO-71','GPIO-72','GPIO-73','GPIO-74','GPIO-75','GPIO-76',
            'GPIO-77','GPIO-78','GPIO-79']

bak_index=['bak0','bak1','bak2','bak3','bak4','bak5','bak6',
           'bak7','bak8','bak9','bak10','bak11','bak12','bak13',
           'bak14','bak15','bak16','bak17','bak18','bak19','bak20',
           'bak21','bak22','bak23','bak24','bak25','bak26','bak27',
           'bak28','bak29','bak30','bak31','bak32','bak33','bak34',
           'bak35','bak36','bak37','bak38','bak39','bak40','bak41',
           'bak42','bak43','bak44','bak45','bak46','bak47','bak48',
           'bak49','bak50','bak51','bak52','bak53','bak54','bak55',
           'bak56','bak57','bak58','bak59','bak60','bak61','bak62',
           'bak63','bak64','bak65','bak66','bak67','bak68','bak69',
           'bak70','bak71','bak72','bak73','bak74','bak75','bak76',
           'bak77','bak78','bak79'
      ]
for i in range(80):
    bak_index[i]=[]


t1=Frame(root,height=1,width=300)
Label(t1,text='Use:  1-GPIO       O-Native\n',anchor='w',height=2,width=300).pack(side=LEFT, fill=Y)
t1.pack(side=TOP,fill=Y)

t2=Frame(root,height=1,width=300)
Label(t2,text='I/O:  1-Output     O-Input\n',anchor='w',height=2,width=300).pack(side=LEFT, fill=Y)
t2.pack(side=TOP,fill=Y)

t3=Frame(root,height=1,width=300)
Label(t3,text='H/L:  1-High       O-Low\n',anchor='w',height=2,width=300).pack(side=LEFT, fill=Y)
t3.pack(side=TOP,fill=Y)

t4=Frame(root,height=1,width=300)
Label(t4,text='INV:  1-Invert     Input Value\n',anchor='w',height=2,width=300).pack(side=LEFT, fill=Y)
t4.pack(side=TOP,fill=Y)

t5=Frame(root,height=1,width=300)
Label(t5,text='Pin Default Set As Native Function\n',anchor='w',height=2,width=300).pack(side=LEFT, fill=Y)
t5.pack(side=TOP,fill=Y)

t6=Frame(root,height=0,width=300)
Label(t6,text='--'*90,anchor='w',height=1,width=300).pack(side=LEFT, fill=Y)
t6.pack(side=TOP,fill=Y)


t7=Frame(root,height=5,width=300)
tt=Frame(t7,height=1,width=300)
lb1=Label(tt, text='PIN',height=1,width=20,anchor=W).pack(side=LEFT, fill=Y)
lb2=Label(tt, text='  USE',height=1,width=20,anchor=W).pack(side=LEFT, fill=Y)
lb3=Label(tt, text='         I/O',height=1,width=20,anchor=W).pack(side=LEFT, fill=Y)
lb4=Label(tt, text='               H/L',height=1,width=20,anchor=W).pack(side=LEFT, fill=Y)
lb5=Label(tt, text='  INV',height=1,width=20,anchor=CENTER).pack(side=LEFT,fill=Y)
tt.pack(side=TOP, fill=Y)
tt1=Frame(t7,height=1,width=300)
Label(tt1,text='--'*90,anchor='w',height=1,width=300).pack(side=LEFT, fill=Y)
tt1.pack(side=TOP,fill=Y)
t7.pack(side=TOP,fill=Y)

cv=Canvas(root,height=30,width=30, scrollregion=(0,0,40,800),bg='red')
S1=Scrollbar(root,orient='vertical',command=cv.yview)
cv['yscrollcommand']=S1.set
S1.pack(side=RIGHT, fill=Y)
cv.pack(side=TOP, fill="both", expand=True)

inner_frame = Frame(cv, background="pink")
cv.create_window(0, 0, anchor="nw", window=inner_frame,tags=("frame",))

for j in range(80):
    cv_frameindex[j]=Frame(inner_frame, height=10, width=10)
    bak_index[j].append(Label(cv_frameindex[j], text=GPIO_index[j], height=1, width=13, anchor=CENTER))
    bak_index[j].append(Label(cv_frameindex[j], text=' '*20, height=1, width=10, anchor=CENTER))
    bak_index[j].append(Checkbutton(cv_frameindex[j], text='0', state='active'))
    bak_index[j].append(Checkbutton(cv_frameindex[j], text='1', state='active'))
    bak_index[j].append(Label(cv_frameindex[j], text=' '*20, height=1, width=13, anchor=CENTER))
    bak_index[j].append(Checkbutton(cv_frameindex[j], text='0', state='active'))
    bak_index[j].append(Checkbutton(cv_frameindex[j], text='1', state='active'))
    bak_index[j].append(Label(cv_frameindex[j], text=' '*20, height=1, width=13, anchor=CENTER))
    bak_index[j].append(Checkbutton(cv_frameindex[j], text='0', state='active'))
    bak_index[j].append(Checkbutton(cv_frameindex[j], text='1', state='active'))
    bak_index[j].append(Label(cv_frameindex[j], text=' '*20, height=1, width=13, anchor=CENTER))
    bak_index[j].append(Checkbutton(cv_frameindex[j], text='0', state='active'))
    bak_index[j].append(Checkbutton(cv_frameindex[j], text='1', state='active'))
    bak_index[j].append(Label(cv_frameindex[j], text=' '*20, height=1, width=13, anchor=CENTER))

for k in bak_index:
    for i in range(len(k)):
        k[i].pack(side=LEFT,fill=Y)
for L in cv_frameindex:
    L.pack(side=TOP, fill=Y)

t8=Frame(inner_frame, height=5, width=300)
Button(t8, text='Generate').pack(fill=Y)
t8.pack(side=TOP, fill=Y)

t9=Frame(inner_frame, height=5, width=300)
Button(t9, text='Generate').pack(fill=Y)
t9.pack(side=TOP, fill=Y)

def on_configure(event):
    cv.itemconfigure("frame", width=event.width)
    cv.configure(scrollregion=cv.bbox("all"))

# make sure the inner frame is always as wide as the canvas,
# and that the scrollregion is up-to-date
cv.bind("<Configure>", on_configure)

root.mainloop()

由于您显然是在构建一个小部件网格，您可能需要考虑使用grid 几何管理器而不是pack 来处理内部框架中的所有内容。它将使您不必创建一堆额外的框架，并且专门用于基于网格的布局。

另外，如果你想要一个水平分隔符，你可以使用一个高度为 2、边框宽度为 2 的框架，而不是一个带有一堆破折号的标签。

最后，如果您使用两个复选按钮仅表示两个数字 0 或 1，则可以使用单个复选按钮。 Checkbuttons 有一个onvalue 和offvalue 属性，它定义了按钮是否被选中时的值。

【讨论】：

  • 您能告诉我如何将所有标签和复选按钮放在一个框架中而不改变我预期的格式吗？因为我按照您的建议尝试过，但所有项目都显示在一行中，所以我不知道如何将它们放在一个框架中但在不同的行中。非常感谢！
  • @clement_lei：创建一个新框架，它是画布的子框架。然后，不要使用cv_frameindex[j]=Frame(cv, height=10, width=10)，而是使用cv_frameindex[j]=Frame(the_new_frame, height=10, width=10)。这将导致所有内容都打包到新框架而不是新画布中。然后，您需要执行cv.create_window(..., window=the_new_frame) 将框架放入画布中，以便可以滚动。您必须设置画布的滚动区域，并且您可能需要管理框架的宽度，使其与画布的宽度完全相同。
  • 请原谅我是 Python 初学者。我照你说的做了： cv=Canvas(root,height=800,width=300, scrollregion=(0,0,100,800),bg='red') FF=Frame(cv, height=800, width=300)对于范围内的 j (80)： cv_frameindex[j]=Frame(FF,height=10,width=10) ......然后 cv.create_window(800,300, window=FF,anchor="nw") 但是除了滚动条，我看不到任何项目。请再给我一个帮助！谢谢。
  • @clement_lei：我已经根据您的代码更新了我的答案以提供一个工作示例。
  • Oakley 先生，非常感谢您的帮助！我的 python 研究的好例子。再次，非常感谢。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-06-04
  • 2020-12-02
  • 1970-01-01
  • 2017-07-03
  • 2011-12-05
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode