tkinter初体验

---

前言

由于大作业需要做一个GUI界面，搜索了一番决定使用tkinter，原因如下：
1.页面布局简单
2.控件使用方便
3.特别是容易上手
4.不需要额外安装库，直接import即可
在几番搜索之下，加上亲自敲代码，总结出来一些经验，在下文会提及到
接下来就是代码+效果+解释

---

一、控件

Lable

标签，在布局中经常使用到

Button

按钮，也是常用控件之一

Entry

文本框，例如在登录时，输入账号，密码就是在文本框里面输入的

Text

文本框，类似于Entry，一般用于显示文本，或者作为记事本，显示输入的内容

Scrollbar

滚动条，在各大网站常见

Radiobutton

单选框，再给出的几个选项中，只能选择其中的一个

Checkbutton

多选框（也叫做复选框），在给出的选项中，选择其中的一个或多个

Canvas

创建画布，用来放置图片，可在画布上放置控件，相当于是给窗口设置了背景图

Listbox

列表盒子，就是一个框，里面有几个列，可选择其中的一个或者多个

Scale

这个是用来选数值的，可水平，可竖直

Spinbox

这个不好描述，看图
框里面的数值通过右边的按钮调大调小

Menu

菜单，这个见源码及效果展示

Combobox

下拉控件

Frame

相关布局

绝对布局
相对布局
表格布局

---

二、相关源码+效果图

首先需要创建一个父窗口（根窗口）

import tkinter
root = tkinter.Tk()#创建一个根窗口
root.title('应用程序窗口')  # 窗口标题
root.resizable(False, False)  # 固定窗口大小
windowWidth = 800  # 获得当前窗口宽
windowHeight = 500  # 获得当前窗口高
screenWidth, screenHeight = root.maxsize()  # 获得屏幕宽和高
geometryParam = '%dx%d+%d+%d' % (
    windowWidth, windowHeight, (screenWidth - windowWidth) / 2, (screenHeight - windowHeight) / 2)
root.geometry(geometryParam)  # 设置窗口大小及偏移坐标
root.wm_attributes('-topmost', 1)  # 窗口置顶
*************************
#这里填入代码（下面的）
************************
root.mainloop()#此句不可少，相当于刷新功能，不断刷新界面

效果：

这里创建了一个根窗口

Canvas
添加背景图
如果直接指定img的话，格式只能位.gif，如果需要其他格式的，需要转换一下

    canva= tkinter.Canvas(root,
                          width=800,
                          height=500,
                          bg='gray')
    global img_main#不可少，少了就显示不出来图片
    im=Image.open("bg_main.jpg")
    img_main=ImageTk.PhotoImage(im)
    canva.create_image(400, 242, image=img_main)
    canva.pack()

效果图：

Lable：

'''
#参数详解：
# win：父窗体
# text：显示的文本内容
# bg：背景色
# fg：字体颜色
# font：字体
# wraplength：指定text文本中多宽之后换行
# justify：设置换行后的对齐方式
# anchor：位置 n北，e东，w西，s南，center居中；还可以写在一起：ne东北方向
# image：放置的图片，lable的大小会跟随图片改变'''
label_text = tkinter.Label(root,
                           text='文本',
                           bg='red',
                           fg='green',
                           font=('黑体', 15),
                           width=20,
                           height=10,
                           wraplength=50,
                           justify='left',
                           anchor='nw')
label_text.pack()

效果图：

Button按钮+弹窗

'''
root：夫窗口
text：按钮名称
command：点击按钮后，出发的事件（执行的函数）
width：宽
height：高
image：按钮上的图片
bg：背景色
bd：边框的宽度
cursor：鼠标移动到按钮的指针样式
font：字体
padx：文本与按钮边框横向距离
pady：文本与按钮的竖向距离
activeforeground：按下时前景色

'''
def b1():#弹窗
   tkinter.messagebox.showerror('错误', '账号或密码错误')#需要在添加代码：from tkinter.messagebox import showerror

B1 = tkinter.Button(root,text="b1",
                    commamd=b1(),
                    width=5,
                    height=5,
                    font=("宋体",10),
                    padx=3,
                    pady=3,
                    bg="red",
                    activeforeground="yellow",
                    cursor="arrow")
B1.pack()
B2=tkinter.Button(root,text="B2",command=lambda :print("B2"))
B2.pack()

效果图：
点别b1按钮之后

entry 文本框

'''
    background(bg)   　　 文本框背景色；
    foreground(fg)        前景色；
    selectbackground　　  选定文本背景色；
    selectforeground　　  选定文本前景色；
    borderwidth(bd)    　 文本框边框宽度；
    font                　字体；
    show          　　    文本框显示的字符，若为*，表示文本框为密码框；
    state            　　 状态；
    width        　　　　  文本框宽度
    textvariable    　　  可变文本，与StringVar等配合着用

'''
def show_text():
    print(entry1.get(),entry2.get())
entry1=tkinter.Entry(root,show="*")#不管输入什么，都显示位*，可以作为密码框
entry1.pack()
#绑定变量
e = tkinter.Variable()
entry2 = tkinter.Entry(root,textvariable=e)
entry2.pack()
e.set("liu")#设置默认值
#设置按钮，输出entry1文本框的内容
B3=tkinter.Button(root,text="输出\n内容",command=show_text)
B3.pack()

text控件

text1=tkinter.Text(root,width=30,height=10)
text1.pack()
st="sajkksfhjsahfas56d46as4dzbkasbda54d6f312adsf31sav467,67sef46sF68SE5"
text1.insert(tkinter.INSERT,st)

效果图：

创建滚动条：

scroll = tkinter.Scrollbar()
text2=tkinter.Text(root,width=15,height=5)
#side 放到那一边 fill 填充
scroll.pack(side=tkinter.LEFT,fill=tkinter.Y)#放置的地方为根窗口的左边
text2.pack(side=tkinter.LEFT,fill=tkinter.X)
#关联
scroll.config(command=text2.yview)
text2.config(yscrollcommand=scroll.set)
text2.pack()
st="vhjvadafbkjahf hfaknfjcla21f3a2h3g465vt71+6t78at78r1yr7297y9ay8798t79c7a9ejhfk jacwhfvwtse4bse154v6y3dy"
text2.insert(tkinter.INSERT,st)

结果图：

单选框Radiobutton

def updata1():
    print(r.get())
r=tkinter.IntVar()
radio1=tkinter.Radiobutton(root,text="radio1",value=1,variable=r,command=updata1)
radio1.pack()
radio2=tkinter.Radiobutton(root,text="radio2",value=2,variable=r,command=updata1)
radio2.pack()

效果图：（只能选择一个）

多选框 Checkbutton

'''
anchor         　　文本位置；
background(bg) 　　背景色；
foreground(fg)    前景色；
borderwidth       边框宽度；
width        　　  组件的宽度；
height     　　    组件高度；
bitmap    　　     组件中的位图；
image    　　      组件中的图片；
font       　　    字体；
justify       　　 组件中多行文本的对齐方式；
text         　　  指定组件的文本；
value      　　    指定组件被选中中关联变量的值；
variable     　    指定组件所关联的变量；
indicatoron       特殊控制参数，当为0时，组件会被绘制成按钮形式;
textvariable      可变文本显示，与StringVar等配合着用
'''
# Checkbutton
def update():
    message=""
    if hobby1.get():
        message+="variable1\n"
    if hobby2.get():
        message+="variable2\n"
    #清空text的内容
    text1.delete(0.0,tkinter.END)
    text1.insert(tkinter.INSERT,message)
# 定义一个绑定变量
hobby1=tkinter.BooleanVar()
# # 多选框
check1=tkinter.Checkbutton(root,text="check1",variable=hobby1,command=update)
check1.pack()
hobby2=tkinter.BooleanVar()
check2= tkinter.Checkbutton(root,text="check2",variable=hobby2,command=update)
check2.pack()
text1=tkinter.Text(root,width=20,height=5)
text1.pack()

效果图：

Scale控件

# tkinter.HORIZONTAL水平
# tkinter.VERTICAL 竖直（默认）
# length:水平时表示宽度，竖直时表示高度
# tickintervar ：选择值将会为该值得倍数
scale1=tkinter.Scale(root,from_=0,to=100,orient=tkinter.VERTICAL,tickinterval=10,length=200)
scale1.pack()
#设置值
scale1.set(20)
#取值
print(scale1.get())

def showNum():
    print(scale1.get())
tkinter.Button(root,text="button",command=showNum).pack()

效果图：

Spinbox控件：

v=tkinter.StringVar()
def updata2():
    print(v.get())
# increment：步长，默认为1
# values要输入一个元组 最好不要和from和to同时使用，而且步长也没用
# command 只要值改变就会执行updata方法
sp = tkinter.Spinbox(root,
                     from_=0,
                     to=100,
                     increment=5,
                     textvariable=v,
                     command=updata2)
sp.pack()

效果图：

菜单：

#菜单条
menuber = tkinter.Menu(root)
root.config(menu=menuber)
def func():
    print("menu")
#创建一个菜单选项
menu1 = tkinter.Menu(menuber,tearoff=False)
#给菜单选项添加内容
for i in ["add_command1asd","add_command2ad","add_command3ad","退出"]:
    if i=='退出':
        menu1.add_separator()
        menu1.add_command(label=i,command=root.quit)
    else:
        menu1.add_command(label=i,command=func)
#向菜单条上添加菜单选项
menuber.add_cascade(label="add_cascade",menu=menu1)

效果图：

Combobox下拉控件：

cv=tkinter.StringVar()
com = ttk.Combobox(root,textvariable=cv)
com.pack()
#设置下拉数据
com["value"]=("1","2","3")
#设置默认值
com.current(0)
#绑定事件
def func(event):
    print(com.get())
    print(cv.get())
com.bind("<>",func)

效果图：

Frame控件

fram=tkinter.Frame(root)
fram.pack()
#left
fram_l=tkinter.Frame(fram)
tkinter.Label(fram_l,text="左上",bg='pink').pack(side=tkinter.TOP)
tkinter.Label(fram_l,text="左上",bg='blue').pack(side=tkinter.TOP)
fram_l.pack(side=tkinter.LEFT)
#right
fram_r=tkinter.Frame(fram)
tkinter.Label(fram_r,text="右上",bg="green").pack(side=tkinter.TOP)
tkinter.Label(fram_r,text="右下",bg="red").pack(side=tkinter.TOP)
fram_r.pack(side=tkinter.RIGHT)

效果图：

绝对布局：

l1=tkinter.Label(root,text="1",bg="red")
l2=tkinter.Label(root,text="2",bg="blue")
l3=tkinter.Label(root,text="3",bg="green")
l1.place(x=10,y=10)
l2.place(x=20,y=40)
l3.place(x=30,y=80)

相对布局：

l1=tkinter.Label(root,text="1",bg="red")
l2=tkinter.Label(root,text="2",bg="blue")
l3=tkinter.Label(root,text="3",bg="green")
l1.pack(fill=tkinter.X,side=tkinter.TOP)
l3.place(x=250,y=250)

效果图：

表格布局 row :行 columun :列

l1=tkinter.Label(root,text="1",bg="red")
l2=tkinter.Label(root,text="2",bg="blue")
l3=tkinter.Label(root,text="3",bg="green")
l1.grid(row=0,column=0)
l2.grid(row=1,column=1)
l3.grid(row=2,column=2)

---

总结

以上代码，大部分为参考，纯手工打造，一个一个字母敲，为的就是早日熟悉这些知识，脚踏实地！
在敲代码的过程中，遇到了些许问题，这里不罗列了，就说说应用的主要几个问题：
1.小编做的是类似于照相机的界面应用，通过画布显示摄像头，通过按钮拍照，录制视频（后续文章会提到）。
2.问题：当我们创建了一个父窗口，一个子窗口时，当子窗口弹出来，无法操作父窗口，问题待解决
3.通过界面控件调用cv2.imshow()，时会出现两个窗口，一个根窗口，一个imshow窗口，此时无法对根窗口操作，本来想着通过根窗口输入名称，然后类似于拍照的功能，存储这一帧的图象，命名方式为输入的名称+当前帧.jpg，经过验证，根本就成功不了，浪费了将近一上午的时间，可惜，最后只能通过另一种方式解决。
4.在敲代码的过程中，需要理解当前代码干的啥，不一定需要记住代码。
5.出现疑问时，写注释，查资料，把相关知识以注释的形式放到旁边
…
由于参考的文章太多了，不知道咋罗列了，求原谅。
总之，脚踏实地，学习+练习项目，巩固知识点，特别是项目整体框架，这个很重要，亲身经历，好的框架事半功倍，只需填写代码，很舒服的。哈哈哈，不多说了，睡了睡了~~

---

写于 2021.05.05 01:40