Day 23 : Tkinter-利用Python建立GUI(基本操作及布局篇)

在进入Tkinter之前，先来讲讲GUI到底是甚麽。

GUI

GUI其实就是图形使用者介面(Graphical User Interface)，也就是指采用图形方式显示的电脑操作使用者介面，简而言之，就是我们经常见到的程序。因为早期的命令列介面(Command-Line Interface)，就是黑画面，通常只支援滑鼠，并且需要记住繁杂的指令，对於一般使用者极其不友善，所以才会有GUI的出现

Tkinter

Tkinter是可以将Python程序码变成图形化介面的套件库，里面给了很多一般图形化介面的基本物件，像是按钮(button)、视窗(frame)、文字标签(label)、卷轴(scrollbar)等等...

Tkinter套件为内建，不需要使用pip安装。

建立视窗

import tkinter as tk

window = tk.Tk()
window.title('GUI')
window.geometry('380x400')
window.resizable(False, False)
window.iconbitmap('icon.ico')
window.mainloop()

执行程序後可以看到跳出了一个视窗

最简易的GUI就这样做出来了，那来解析一下程序码吧!

• tk.Tk() : GUI的核心，需要用这个函式建立架构
• title() : 程序上方的文字
• geometry() : 长宽设定
• resizable() : 定义可不可以被使用者放大缩小视窗，我设定为两个False代表长宽都无法被放大缩小
• iconbitmap() : 设定程序的图示，可在括弧中放入档案路径
• mainloop() : 非常重要的函式，会使程序常驻执行，没有这行的话因为程序执行完的关系所以你甚麽都不会看到，记得要打在程序的最後一行

空的GUI甚麽都没有，我们来加一些东西好了。这篇会以布局为重点，在进入下一篇元件篇时上手才会比较容易。

先来建立一个按钮好了，按钮叫做button，所以我们要从tk里面取出这个物件，并且给他一个名字

test = tk.Button(text="测试")

括弧中可以放很多不同的参数，最基本的就是text，会在按钮上方显示文字，当打完这行，执行後，你会发现，甚麽都没有。因为没有布局，在tkinter中，每个元件都要做布局，没有布局就不会显示出来，所以再来我们要来谈谈布局的部分。

布局

在tkinter中，有三种布局，分别是pack、grid以及place。

pack:

pack为最基础的布局方式了，先来从side参数来讲起。

• side : side主要有四种，top、buttom、right、left，分别是上下左右。

test = tk.Button(text="测试")
test.pack(side="top")

它会利用相对位置来做布局，那如果两个元件同时用同一个参数呢?

test = tk.Button(text="测试")
test.pack(side="top")
test2 = tk.Button(text="测试2")
test2.pack(side="top")
test3 = tk.Button(text="测试3")
test3.pack(side="left")
test4 = tk.Button(text="测试4")
test4.pack(side="left")

可以发现，如果是top或buttom，元件会直的向下或向上堆叠，right、left则是会横的向右或向左堆叠。

• fill : fill这个参数用来调整元件填满的属性，有x、y、both可用

test = tk.Button(text="测试")
test.pack(side="top",fill="x")

x的呈现效果长这样，也可以从中知道y是直的填满，both则是x轴以及y轴都填满

• anchor : 用来设定元件起始位置(锚定位置)，有E,W,S,N,CENTER,NE,SE,SW,NW等
  
  大致位置就像上图，若未设定anchor，预设为CENTER。

anchor在tkinter中的constants，记得要使用时要先import进来。

from tkinter.constants import * #加到第一行

grid:

grid可以想像成是表格式的排列方法，可以利用控制row(列)以及column(行)来有规律地规划元素。

test = tk.Button(text="测试")
test.grid(row=0,column=1)
test2 = tk.Button(text="测试2")
test2.grid(row=1,column=1)
test3 = tk.Button(text="测试3")
test3.grid(row=2,column=0)

可以利用rowspan以及columnspan来合并储存格，跟word的概念有点像:

test = tk.Button(text="测试1")
test.grid(row=0,column=0)
test2 = tk.Button(text="测试2")
test2.grid(row=1,column=0)
test3 = tk.Button(text="测试3")
test3.grid(row=0,column=1,rowspan=2)

可以看到第二列被合并了，所以测试3的按钮会长那样。

place:

place可以使用绝对位置来进行布局，用法非常简单，只要定义两个座标(x,y)就能决定元件的位置。

from tkinter.constants import CENTER #加到第一行

test = tk.Button(text="测试")
test.place(x=190,y=200,anchor=CENTER)

同时也可以加入anchor等参数，来让版面更加的整齐，像上述的例子就是利用绝对位置加上anchor的补正，来实现置中的效果。


(上图分别为有加anchor以及没加的差别)

以上就是最基础的tkinter布局介绍，tkinter没有甚麽太花俏的布局，虽然在实用上比起Html有flex排版的功能，少了很多变化性，可是十分容易上手。明天会开始介绍元件的部分，让大家可以藉由元件，以自己喜欢的布局，配合python的功能做出一些实用性的小程序。