1.从一个简易计算器的tkinter设计开始学习
![661e8fea84e742e77c6b1282b6cd8c09.png](https://i-blog.csdnimg.cn/blog_migrate/061d77b2cf8a4a3ff556f5ba3779bf6a.jpeg)
2.代码:
from tkinter import * #引出模块class App: #定义类App,类是字母要大写的,可以App,或APP均可以 def __init__(self, master): self.master = master self.initWidgets() def initWidgets(self): # 创建一个输入组件 e = Entry(relief=SUNKEN, font=('Courier New', 24), width=22) # 对该输入组件使用Pack布局,放在容器顶部 e.pack(side=TOP, pady=10) p = Frame(self.master) p.pack(side=TOP) # 定义字符串的元组 names = ("0" , "1" , "2" , "3" , "4" , "5" , "6" , "7" , "8" , "9" , "+" , "-" , "*" , "/" , ".", "=") # 遍历字符串元组 for i in range(len(names)): # 创建Button,将Button放入p组件中 b = Button(p, text=names[i], font=('Verdana', 20), width=6) b.grid(row=i // 4, column=i % 4) #gird的布局,解释器布局的关键 root = Tk() root.title("Grid布局") root.geometry('1000x1000')App(root) root.mainloop()
3.图1
![29df136ae1346ad211c7e59ef714acfd.png](https://i-blog.csdnimg.cn/blog_migrate/68dae7f970b71c2fcdf63328c2ce3107.jpeg)
------------------------------------
4.学习要点,复习相关知识
------------------------------------
5.e = Entry(relief=SUNKEN, font=('Courier New', 24), width=22)
5.1 文本框的代码学习relief
The relief style有几种:大写,适用于文本框,也适用于按钮格式,但是按钮如果不设置,那就是默认的
FLAT
RAISED
SUNKEN
GROOVE
RIDGE
5.2 通过代码和效果图来看看
from tkinter import *import tkintertop = Tk()top.title("relief属性的风格效果") top.geometry('800x200')B1 = Button(top, text = "FLAT", relief = FLAT )B2 = Button(top, text = "RAISED", relief = RAISED )B3 = Button(top, text = "SUNKEN", relief = SUNKEN )B4 = Button(top, text = "GROOVE", relief = GROOVE )B5 = Button(top, text = "RIDGE", relief = RIDGE )B1.pack()B2.pack()B3.pack()B4.pack()B5.pack()top.mainloop()
5.3 图2
![21aa523e3148a715ace1a82eae64e9f2.png](https://i-blog.csdnimg.cn/blog_migrate/38a7bc063c1e8718d1e59cd74ec8e30b.jpeg)
6.e.pack(side=TOP, pady=10) #文本框的位置设置
6.1 tkin的pack()布局学习
6.2 代码
from tkinter import *root = Tk()root.title("pack布局的效果") root.geometry('800x200')Button(root,text='A').pack(side=LEFT,expand=YES,fill=Y)Button(root,text='B').pack(side=TOP,expand=YES,fill=BOTH)Button(root,text='C').pack(side=RIGHT,expand=YES,fill=NONE)Button(root,text='D').pack(side=LEFT,expand=NO,fill=Y)Button(root,text='E').pack(side=TOP,expand=YES,fill=BOTH)Button(root,text='F').pack(side=BOTTOM,expand=YES)Button(root,text='G').pack(anchor=SE)root.mainloop()
6.3
图3
![47ae7729f5bbc03f1482ab700bb5720a.png](https://i-blog.csdnimg.cn/blog_migrate/25e486c49a7f3303a72759f0776854af.jpeg)
拉伸后
图4
![1c21a624d0357e7fbf4898a966511633.png](https://i-blog.csdnimg.cn/blog_migrate/ba2d00069d2f67cb76b699601f4aef65.jpeg)
6.4 pack的side有:注意是大写
left: 左;top: 上;right: 右;botton: 下
6.5 expand=YES或NO
#expand:yes:扩展整个空白区或no:不扩展
6.6 fill:填充
x:水平方向填充
y:竖直方向填充
both:水平和竖直方向填充
none:不填充
6.7 anchor: #抛锚,停泊;固定
N:北 下
E:东 右
S:南 下
W:西 左
CENTER:中间
则SE=south east =就是东南位置
------------
7. 探讨
7.1 将代码做些改变
------------
Button(root,text='A').pack(side=LEFT,expand=NO,fill=Y)Button(root,text='B').pack(side=TOP,expand=NO,fill=BOTH)Button(root,text='C').pack(side=RIGHT,expand=NO,fill=NONE)Button(root,text='D').pack(side=LEFT,expand=NO,fill=Y)Button(root,text='E').pack(side=TOP,expand=NO,fill=BOTH)Button(root,text='F').pack(side=BOTTOM,expand=NO)Button(root,text='G').pack(anchor=SE)
7.2 图5
![61011a6480cbdcd66ef4a73f37d5002c.png](https://i-blog.csdnimg.cn/blog_migrate/11f513ea4ed4a1dff4d3bcb5c291af9d.jpeg)
7.3
A先left,D后left,所以依次排出
B先top,E后top,所以依次排出
C为right,右侧,靠边居中点
F为bottom,底部,靠底居中点
.pack() #如果不设置,默认就是顶格居中依次排下
8.fill如不设置,那就是默认大小,代码改一下
8.1 代码
Button(root,text='A').pack(side=LEFT,expand=NO,fill=NONE)Button(root,text='B').pack(side=TOP,expand=NO,fill=NONE)Button(root,text='C').pack(side=RIGHT,expand=NO,fill=NONE)Button(root,text='D').pack(side=LEFT,expand=NO,fill=NONE)Button(root,text='E').pack(side=TOP,expand=NO,fill=NONE)Button(root,text='F').pack(side=BOTTOM,expand=NO)Button(root,text='G').pack(anchor=SE)
8.2 图6
![13e7527a92ff5fdf29f3658705f153a5.png](https://i-blog.csdnimg.cn/blog_migrate/5c2d571e4ae23e7e0cdc19e851a081ea.jpeg)
有个小bug,那就是A和D不是左边一条水平线上。不知道为什么?自己好好去思考思考,知道的人可以留言,谢谢。
但是B和E,是顶格居中的,估计需要在按钮设计行和列里解决。
注意不设置一般就是默认expand=NO,fill=NONE
9.代码改为
Button(root,text='A').pack(side=LEFT)Button(root,text='B').pack(side=TOP)Button(root,text='C').pack(side=RIGHT)Button(root,text='D').pack(side=LEFT)Button(root,text='E').pack(side=TOP)Button(root,text='F').pack(side=BOTTOM)Button(root,text='G').pack(anchor=SE)
图7
![2dea6268f4b7d87678b5908bfa660cb0.png](https://i-blog.csdnimg.cn/blog_migrate/9a699596afd65cf6dadfe52752e816be.jpeg)
和图6一样
10.回到这里
e.pack(side=TOP, pady=10)
#pady=10,y轴就是水平拉10,可以设置
同理,padx=10,那就是垂直拉10,数值可以设置
注意pack和grid不能同时使用。
自己还得多练习。