pythontkinter编程三大布局管理器pack、grid、place应用实战解析

一叶之修

✨✨欢迎大家来到景天科技苑✨✨🎈🎈养成好习惯，先赞后看哦~🎈🎈🏆作者简介：景天科技苑🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi，flask等框架，linux，shell脚本等实操经验，网站搭建，数据库等分享。所属的专栏：python图形化GUI编程tkinter精讲景天的主页：景天科技苑文章目录tkinter布局管理器1.grid布局管理器2.pack布局管理器3.place布局管理器tkinter布局管理器一个GUI应用程序必然有大量的组件，这些组件如何排布？这时候，就需要使用tkinter提供的布局管理器帮助我们组织、管理在父组件中子组件的布局方式。tkinter提供了三种管理器：pack、grid、place。1.grid布局管理器grid表格布局，采用表格结构组织组件。子组件的位置由行和列的单元格来确定，并且可以跨行和跨列，从而实现复杂的布局。【示例】grid布局用法-登录界面设计"""测试Grid布局管理器的基本用法，使用面向对象的方式"""fromtkinterimport*fromtkinterimportmessageboxclassApplication(Frame):def__init__(self,master=None):super().__init__(master)#super()代表的是父类的定义，而不是父类对象self.master=masterself.pack()self.createWidget()defcreateWidget(self):"""通过grid布局实现登录界面"""self.label01=Label(self,text="用户名")self.label01.grid(row=0,column=0,pady=10)self.entry01=Entry(self)self.entry01.grid(row=0,column=1,pady=10)Label(self,text="用户名为手机号",foreground="gray").grid(row=0,column=2)Label(self,text="密码").grid(row=1,column=0,pady=10)self.entry02=Entry(self,show="*")self.entry02.grid(row=1,column=1,pady=10)#EW表示组件在水平方向上拉满该栅格Button(self,text="登录",command=self.mylogin).grid(row=2,column=1,sticky=EW)Button(self,text="取消",command=root.destroy).grid(row=2,column=2,sticky=E)defmylogin(self):username=self.entry01.get()pwd=self.entry02.get()print("去数据库比对用户名和密码！")print("用户名："+username)print("密码："+pwd)ifusername=="13333333333"andpwd=="123456":messagebox.showinfo("景天科技苑学习系统","登录成功！欢迎开始学习！")else:messagebox.showinfo("景天科技苑学习系统","登录失败！用户名或密码错误！")if__name__=='__main__':root=Tk()root.geometry("500x120+200+300")root.title("用户登录")app=Application(master=root)root.mainloop()1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253运行当输入错误的用户名或密码当输入正确的用户名和密码【示例】基于grid布局的计算器软件的设计案例根据实际简易计算器的按键分布，设计一个相仿的计算器界面，相应的功能暂不需要实现。如上界面，实际可以设计成一个7行4列的表格布局，然后将相应的按钮放置进去即可。"""计算器软件界面的设计"""fromtkinterimport*fromtkinterimportmessageboximportrandomclassApplication(Frame):def__init__(self,master=None):super().__init__(master)#super()代表的是父类的定义，而不是父类对象self.master=masterself.pack()self.createWidget()defcreateWidget(self):"""通过grid布局实现计算器的界面"""btnText=(("MC","M+","M-","MR"),("C","±","/","x"),(7,8,9,"-"),(4,5,6,"+"),(1,2,3,"="),(0,"."))Entry(self).grid(row=0,column=0,columnspan=4,pady=10)forrindex,rinenumerate(btnText):forcindex,cinenumerate(r):ifc=="=":#等号跨行Button(self,text=c,width=2)\.grid(row=rindex+1,column=cindex,rowspan=2,sticky=NSEW)elifc==0:#0跨列Button(self,text=c,width=2)\.grid(row=rindex+1,column=cindex,columnspan=2,sticky=NSEW)elifc==".":#由于0跨列了，所以点的列要加1Button(self,text=c,width=2)\.grid(row=rindex+1,column=cindex+1,sticky=NSEW)else:#其他普通的正常显示Button(self,text=c,width=2)\.grid(row=rindex+1,column=cindex,sticky=NSEW)if__name__=='__main__':root=Tk()root.geometry("230x230+200+300")root.title('科学计算器')app=Application(master=root)root.mainloop()123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354运行，显示计算器界面【示例】带有计算功能的计算器importtkinterastkdefcalculate(event):"""根据用户输入计算结果并显示"""try:result=eval(entry.get())entry.delete(0,tk.END)entry.insert(tk.END,str(result))exceptExceptionase:entry.delete(0,tk.END)entry.insert(tk.END,"Error")defbutton_click(number):"""在输入框中添加点击的数字或符号"""current=entry.get()entry.delete(0,tk.END)entry.insert(tk.END,current+str(number))#初始化Tkinter窗口root=tk.Tk()root.title("简易计算器")root.geometry("400x360+500+300")#创建一个输入框用于显示和输入数字entry=tk.Entry(root,width=40,borderwidth=6)entry.bind("",calculate)#绑定回车键触发计算entry.grid(row=0,column=0,columnspan=4,padx=10,pady=10)#定义按钮buttons=[('7',1,0),('8',1,1),('9',1,2),('/',1,3),('4',2,0),('5',2,1),('6',2,2),('*',2,3),('1',3,0),('2',3,1),('3',3,2),('-',3,3),('0',4,0),('.',4,1),('=',4,2),('+',4,3)]#创建按钮并放置在界面上for(text,row,col)inbuttons:iftext=="=":tk.Button(root,text=text,padx=35,pady=20,command=lambda:calculate(None)).grid(row=row,column=col)else:tk.Button(root,text=text,padx=35,pady=20,command=lambdat=text:button_click(t)).grid(row=row,column=col)#运行Tkinter事件循环root.mainloop()123456789101112131415161718192021222324252627282930313233343536373839404142434445运行按下等号得到结果2.pack布局管理器pack按照组件的创建顺序将子组件添加到父组件中，按照垂直或者水平的方向自然排布。如果不指定任何选项，默认在父组件中自顶向下垂直添加组件。pack是代码量最少，最简单的一种，可以用于快速生成界面。pack()参数详解：编写一个程序的界面，就是要把各个组件，以适当大小，定位到界面的某个位置。　　tkinter以提供3种界面组件布局管理的方法，分别是：pack，grid，place这篇文章先来讲解pack方法。　　pack()方法的参数有：side,fill,padx/pady,ipadx/ipady,anchor,expand等。【老鸟建议】如上列出了pack布局所有的属性，但是不需要挨个熟悉，了解基本的即可。pack适用于简单的垂直或水平排布，如果需要复杂的布局可以使用grid或place。【示例】pack布局用法，制作钢琴按键布局#测试pack布局管理fromtkinterimport*root=Tk()root.geometry("700x220")root.title('钢琴按键分布')#Frame是一个矩形区域，就是用来放置其他子组件f1=Frame(root)f1.pack()f2=Frame(root)f2.pack()btnText=("流行风","中国风","日本风","重金属","轻音乐")fortxtinbtnText:Button(f1,text=txt).pack(side="left",padx="10")foriinrange(1,13)abel(f2,width=5,height=10,borderwidth=1,relief="solid",bg="black"ifi%2==0else"white").pack(side="left",padx=2)root.mainloop()123456789101112131415161718192021222324运行效果3.place布局管理器place布局管理器可以通过坐标精确控制组件的位置，适用于一些布局更加灵活的场景。Place布局就是其他GUI编程中的“绝对布局”，这种布局方式要求程序显式指定每个组件的绝对位置或相对于其他组件的位置。如果要使用Place布局，调用相应组件的place()方法即可。在使用该方法时同样支持一些详细的选项，关于这些选项的介绍如下：【示例】place布局管理-基本用法测试fromtkinterimport*root=Tk();root.geometry("500x300")root.title("布局管理place");root["bg"]="white"f1=Frame(root,width=200,height=200,bg="green")#组件在坐标轴上的绝对位置f1.place(x=30,y=30)#如果relx和x同时出现，先根据relx计算距离父组件最左边位置，然后再根据x来加减x像素的位置Button(root,text="景天科技苑").place(relx=0.2,x=100,y=20,relwidth=0.2,relheight=0.5)Button(f1,text="百战程序员").place(relx=0.6,rely=0.7)Button(f1,text="景天老师").place(relx=0.5,rely=0.2)root.mainloop()1234567891011121314运行，景天科技苑按钮中，通过place布局，同时出现了x和relx，现根据relx计算相对于父组件的布局，然后再根据x来计算绝对布局【示例】place布局管理-扑克牌游戏demo"""扑克牌游戏的界面设计"""fromtkinterimport*classApplication(Frame):def__init__(self,master=None):super().__init__(master)#super()代表的是父类的定义，而不是父类对象self.master=masterself.pack()self.createWidget()defcreateWidget(self):"""通过place布局管理器实现扑克牌位置控制"""#self.photo=PhotoImage(file="imgs/puke/puke1.gif")#self.puke1=Label(self.master,image=self.photo)#self.puke1.place(x=10,y=50)#10张牌的gif图片#循环拿出扑克牌self.photos=[PhotoImage(file="imgs/puke/puke"+str(i+1)+".gif")foriinrange(10)]self.pukes=[Label(self.master,image=self.photos[i])foriinrange(10)]#将10张扑克布局，折叠形式展示foriinrange(10):self.pukes[i].place(x=50+i*40,y=50)#为所有的Label增加事件处理，表示单击左键self.pukes[0].bind_class("Label","",self.chupai)defchupai(self,event):#event表示事件，包含了被点击的是哪个组件#event.widget.winfo_geometry()表示组件的坐标信息print(event.widget.winfo_geometry())#event.widget.winfo_y()表示组件的y轴坐标信息print(event.widget.winfo_y())#点击鼠标出牌，如果未出牌，点击某张牌，该牌高度上移30，如果已出牌，就恢复到默认高度50ifevent.widget.winfo_y()==50:event.widget.place(y=30)else:event.widget.place(y=50)if__name__=='__main__':root=Tk()root.geometry("600x270+200+300")root.title('扑克牌游戏')app=Application(master=root)root.mainloop()1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253运行点击某张牌，会上移再点一下，会恢复