GUI介绍

• GraphicalUserInterface

• GUI for Python: TKinter, wxPython, PyQt

• TKinter:

  • 绑定的是TK GUI工具集，用Python包装的Tcl代码

• PyGIK

  • TKinter的替代品

• wxPython

  • 跨平台的Python GUI

• PyQt

  • 跨平台的
  • 商业授权可能有问题

• 推荐资料

  • 辛星GUI，辛星Python（简洁、清晰）
  • Python GUI Programming cookbook
  • TKinter reference a GUI for Python

# 测试tkinter包是否好用
import tkinter

tkinter._test()

# hello world
import tkinter

base = tkinter.Tk()

# 消息循环
base.mainloop()

TKinter 常用组件

• 按钮

    Button        按钮组件
    RadioButton   单选框组件
    CheckButton   选择按钮组件
    ListButton    列表框组件
  

• 文本输入组件

    Entry         单行文本框组件
    Text          多行文本框组件
  

• 标签组件

    Label         标签组件，可以显示图片和文字
    Message       标签组件，可以根据内容将文字换行
  

• 菜单

    Menu          菜单组件
    MenuButton    菜单按钮组件，可以使用Menu代替
  

• 滚动条

    Scale         滑块组件
    Scrollbar     滚动条组件
  

• 其他组件

    Canvas        画布组件
    Frame         框架组件，将多个组件编组
    Toplevel      创建子窗口容器组件
  

组件的大致使用步骤

1. 创建总面板

2. 创建面板上的各种组件

   1. 指定组件的父组件，即附属关系
   2. 利用相应的属性对组件进行设置
   3. 给组件安排布局

3. 同步骤2相似，创建好多个组件

4. 最后，启动总面板的消息循环

# Label案例

import tkinter

base = tkinter.Tk()
# 负责标题
base.wm_title("Label Test")

lb = tkinter.Label(base, text="Python Label")
# 给相应组件指定布局
lb.pack()

base.mainloop()

# 设置Label案例

import tkinter

base = tkinter.Tk()
base.wm_title("Label Test")
# 支持属性和很多background，font，underline等
# 第一个参数，指定所属
lb1 = tkinter.Label(base, text="Python AI")
lb1.pack()

lb2 = tkinter.Label(base, text="绿色背景", background="green")
lb2.pack()

lb3 = tkinter.Label(base, text="蓝色背景", background="blue")
lb3.pack()

base.mainloop()

# Button案例

import tkinter

def showLable():
    global baseFrame
    # 在函数中定义了一个Label
    # Label的父组件是baseFrame
    lb = tkinter.Label(baseFrame, text="显示Label")
    lb.pack()
    
baseFrame = tkinter.Tk()
# 生成一个按钮
# command参数指示，当按钮被按下的时候，执行哪个函数
btn = tkinter.Button(baseFrame, text="Show Lable", command=showLable)
btn.pack()

baseFrame.mainloop()



'''
Button的属性：

anchor --------------------设置按钮中文字的对齐方式，相对于按钮的中心位置
background(bg)-------------设置按钮的背景颜色
foreground(fg)-------------设置按钮的前景色（文字的颜色）
borderwidth(bd)------------设置按钮边框宽度
cursor---------------------设置鼠标在按钮上的样式
command--------------------设置按钮点击时触发的函数
bitmap---------------------设置按钮上显示的位图
font-----------------------设置按钮上文字的字体
width----------------------设置按钮的宽度（字符个数）
height---------------------设置按钮的高度（字符个数）
state----------------------设置按钮的状态
text-----------------------设置按钮上的文字
image----------------------设置按钮上的图片

'''

'\nButton的属性：\n\nanchor --------------------设置按钮中文字的对齐方式，相对于按钮的中心位置\nbackground(bg)-------------设置按钮的背景颜色\nforeground(fg)-------------设置按钮的前景色（文字的颜色）\nborderwidth(bd)------------设置按钮边框宽度\ncursor---------------------设置鼠标在按钮上的样式\ncommand--------------------设置按钮点击时触发的函数\nbitmap---------------------设置按钮上显示的位图\nfont-----------------------设置按钮上文字的字体\nwidth----------------------设置按钮的宽度（字符个数）\nheight---------------------设置按钮的高度（字符个数）\nstate----------------------设置按钮的状态\ntext-----------------------设置按钮上的文字\nimage----------------------设置按钮上的图片\n\n'

组件布局

• 控制组件的摆放方式

• 三种布局：

  • pack：按照方位布局
  • place：按照坐标布局
  • grid：网格布局

• pack布局

  • 最简单，代码量最少，挨个摆放，默认从上到下，系统自动设置
  • 通用使用方式为：组件对象.pack(设置…)
  • side: 停靠方位，可选值为LEFT，TOP，RIGHT，BOTTOM
  • fill：填充方式，X，Y，BOTH，NONE
  • expande（是否填充）：YES/NO
  • anchor（停靠方向）：N,E,S,W,CENTER
  • ipadx：x方向的内边距
  • ipady：y方向的内边距
  • padx：x方向外边界
  • pady：y方向外边界

• grid布局

  • 通用使用方式：组件对象.grid(设置…)
  • 利用row，column编号，都是从0开始
  • sticky：N,E,S,W表示上下左右，用来决定组件从哪个方向开始
  • 支持ipadx，padx等参数，跟pack吉函数含义一样
  • 支持rowspan，columnapan，表示跨行，跨行数量

• place布局

  • 明确方位的摆放
  • 相对位置布局，随意改变窗口大小会导致混乱
  • 使用place函数，分为绝对布局和相对布局，绝对布局是使用x，y参数
  • 相对布局是使用relx，rely，relheight，relwidth

# pack布局案例
import tkinter

baseFrame = tkinter.Tk()
# 以下所有代码都是创建一个，然后布局
btn1 = tkinter.Button(baseFrame, text='A')
btn1.pack(side=tkinter.LEFT, expand=tkinter.YES, fill=tkinter.Y)

btn2 = tkinter.Button(baseFrame, text='B')
btn2.pack(side=tkinter.TOP, expand=tkinter.YES, fill=tkinter.BOTH)

btn2 = tkinter.Button(baseFrame, text='C')
btn2.pack(side=tkinter.RIGHT, expand=tkinter.YES, fill=tkinter.NONE, 
          anchor=tkinter.NE)

btn2 = tkinter.Button(baseFrame, text='D')
btn2.pack(side=tkinter.LEFT, expand=tkinter.YES, fill=tkinter.Y)

btn2 = tkinter.Button(baseFrame, text='E')
btn2.pack(side=tkinter.TOP, expand=tkinter.NO, fill=tkinter.BOTH)

btn2 = tkinter.Button(baseFrame, text='F')
btn2.pack(side=tkinter.BOTTOM, expand=tkinter.YES)

btn2 = tkinter.Button(baseFrame, text='G')
btn2.pack(anchor=tkinter.SE)

baseFrame.mainloop()

# grid布局案例
import tkinter

baseFrame = tkinter.Tk()

# 下面注释掉的一行代码跟下面两行代码等效
# lb1 = tkinter.Label(baseFrame, text="账号：").grid(row=0, sticky=tkinter.W)
lb1 = tkinter.Label(baseFrame, text="账号：")
lb1.grid(row=0, sticky=tkinter.W)

en = tkinter.Entry(baseFrame)
en.grid(row=0, column=1, sticky=tkinter.E)

lb2 = tkinter.Label(baseFrame, text="密码：").grid(row=1, sticky=tkinter.W)
tkinter.Entry(baseFrame).grid(row=1, column=1, sticky=tkinter.E)

btn = tkinter.Button(baseFrame, text="登录").grid(row=2, column=1, sticky=tkinter.W)
baseFrame.mainloop()

消息机制

• 消息的传递机制
  • 自动发出事件/消息
  • 消息由系统负责发送到队列
  • 由相关组件进行绑定/设置
  • 后端自动选择感兴趣的事件并做出相应的反应
• 消息格式：
  • <[modifier-]—type-[-detail]>
  • <Button-1>: Button表示一个按钮事件，1代表的是鼠标左键，2代表中键
  • <KeyPress-A>:键盘A键位
  • <Control-Shift-KeyPress-A>: 同时按下Control、Shift、A三个键位
  • <F1>:F1键盘
  • 键位对应名称

# 事件的简单例子
import tkinter

def baseLabel(event):
    global baseFrame
    print("被点击")
    lb = tkinter.Label(baseFrame, text="谢谢点击")
    lb.pack()

# 画出程序的总框架
baseFrame = tkinter.Tk()

lb = tkinter.Label(baseFrame, text="模拟按钮")
# Label绑定相应的消息和处理函数
# 自动获取左键点击，并启动相应的处理函数baseLabel
lb.bind("<Button-1>", baseLabel)
lb.pack()


# 启动消息循环
# 至此，表示程序开始执行
baseFrame.mainloop()

被点击

TKinter的绑定

• bind_all：全局范围的绑定，默认的是全局快捷键，比如F1是帮助文档
• bind_class：接受三个参数，第一个是类名，第二个是事件，第三个是操作
  • w._bind_class(“Entry”, “<Control-V>”, my_paste)
• bind：单独对某一个实例绑定
• unbind：解绑，需要一个参数，即你要解绑哪个事件

Entry

• 输入框，功能单一
• entry[“show”] = “*”，设置遮挡字符

# 输入框案例

import tkinter

# 模拟登录函数
def reg():
    # 从相应输入框中，得到用户的输入
    name = e1.get()
    pwd = e2.get()
    
    t1 = len(name)
    t2 = len(pwd)
    
    if name == "111" and pwd == "222":
        # 需要理解下面代码的含义
        lb3["text"] = "登录成功"
    else:
        lb3["text"] = "用户名或密码错误"
        # 输入框删除用户输入的内容
        # 注意delete的两个参数，表示从第几个删除到第几个
        e1.delete(0,t1)
        e2.delete(0,t2)
        
# 启动舞台
baseFrame = tkinter.Tk()

lb1 = tkinter.Label(baseFrame, text="用户名：")
lb1.grid(row=0, column=0, stick=tkinter.W)

e1 = tkinter.Entry(baseFrame)
e1.grid(row=0, column=1, stick=tkinter.E)

lb2 = tkinter.Label(baseFrame, text="密码：")
lb2.grid(row=1, column=0, stick=tkinter.W)

e2 = tkinter.Entry(baseFrame)
e2.grid(row=1, column=1, stick=tkinter.E)
e2['show'] = '*'

# Button参数command的意思是，当按钮被点击后启动相应的处理函数
btn = tkinter.Button(baseFrame, text="登录", command=reg)
btn.grid(row=2, column=1, stick=tkinter.E)

lb3 = tkinter.Label(baseFrame, text="")
lb3.grid(row=3)

# 启动主Frame
baseFrame.mainloop()

菜单

普通菜单

• 第一个Menu类定义的是parent
• add_command 添加菜单项，如果菜单是顶层菜单，则从左向右添加，
  否则就是下拉菜单
  • label：指定菜单项名称
  • command：点击后相应的调用函数
  • acceletor：快捷键
  • underline：指定是否菜单信息下有横线
  • menu：属性指定哪一个作为顶级菜单

# 普通菜单案例
import tkinter

baseFrame = tkinter.Tk()

menubar = tkinter.Menu(baseFrame)

for item in ['File', 'Edit', 'View', 'Aboyt']:
    menubar.add_command(label=item)
    
baseFrame['menu'] = menubar

baseFrame.mainloop()

级联菜单

• add_cascade：级联菜单，作用是引出后面的菜单
• add_cascade的menu属性：指定把菜单级联到哪个菜单上
• label：名称
• 过程：
  • 1. 建立menu实例
  • 1. add_command
  • 1. add_cascade

# 级联菜单案例

import tkinter

baseFrame = tkinter.Tk()

menubar = tkinter.Menu(baseFrame)

emenu = tkinter.Menu(menubar)

for item in ['Copy', 'Past', 'Cut']:
    emenu.add_command(label=item)
    
menubar.add_cascade(label='File')
menubar.add_cascade(label='Edit', menu=emenu)
menubar.add_cascade(label='About')

baseFrame['menu'] = menubar

baseFrame.mainloop()

弹出式菜单

• 弹出菜单也叫上下文菜单
• 实现的大致思路
  1. 建立菜单并向菜单添加各种功能
  2. 监听鼠标右键
  3. 如果右键点击，则根据位置判断弹出
  4. 调用Menu的pop方法
• add_separator：添加分隔符

# 弹出式菜单案例

import tkinter

def makeLabel():
    global baseFrame
    tkinter.Label(baseFrame, text="PHP是最好的编程语言，我用Python").pack()
    
baseFrame = tkinter.Tk()

menubar = tkinter.Menu(baseFrame)
for x in ['麻辣香菇', '汽锅鸡', '东坡肘子']:
    menubar.add_separator()
    menubar.add_command(label=x)
    
menubar.add_command(label="重庆火锅", command=makeLabel)

# 事件处理函数一定要至少有一个参数，且第一个参数表示的是系统事件
def pop(event):
    # 注意使用 event.x 和 event.x_root 的区别
    # menubar.post(event.x, event.y)
    menubar.post(event.x_root,  event.y_root)
    
baseFrame.bind("<Button-3>", pop)

baseFrame.mainloop()

canvas 画布

• 画布：可以自由的在上面绘制图形的一个小舞台

• 在画布上绘制对象，通常用create_xxxx，xxxx=对象类型，例如line，rectangle

• 画布的作用的把一定的组件画到画布上显示出来

• 画布所支持的组件：

  • arc（圆或者弧）
  • bitmap（一个位图）
  • image(BitmapImage，PhotoImage)（图片）
  • line（线）
  • oval（椭圆形）
  • polygon（多边形）
  • rectangle（四边形）
  • text（文字）
  • window（组件）

• 每次调用create_xxx都会返回一个创建的组件的ID，同时也可以用tag属性指定其标签

• 通过调用canvas.move实现一个一次性动作

# canvas案例
import tkinter

baseFrame = tkinter.Tk()

cvs = tkinter.Canvas(baseFrame, width=300, height=200)
cvs.pack()
# 一条线需要两个点指明起始
# 参数数字的单位是px
cvs.create_line(23,23, 190,234)
cvs.create_text(56,67, text="I LOVE PYTHON")

baseFrame.mainloop()

# 画一个五角星
import tkinter
import math as m

baseFrame = tkinter.Tk()

w = tkinter.Canvas(baseFrame, width=300, height=300, background="gray")
w.pack()

# 中心点
center_x = 150
center_y = 150

r = 150

# 依次存放五个点的位置
points = [
    # 左上点
    # pi是一个常量数字，3.1415926
    center_x - int(r * m.sin(2 * m.pi / 5)),
    center_y - int(r * m.cos(2 * m.pi / 5)),
    
    # 右上点
    center_x + int(r * m.sin(2 * m.pi / 5)),
    center_y - int(r * m.cos(2 * m.pi / 5)),
    
    # 左下点
    center_x - int(r * m.sin( m.pi / 5)),
    center_y + int(r * m.cos( m.pi / 5)),
    
    # 顶点
    center_x,
    center_y - r,
    
    # 右下点
    center_x + int(r * m.sin( m.pi / 5)),
    center_x + int(r * m.cos( m.pi / 5)),
    
]

# 创建一个多边形
w.create_polygon(points, outline="green", fill="yellow")
w.create_text(150,150, text="五角星")

baseFrame.mainloop()

import tkinter

baseFrame = tkinter.Tk()

def btnClick(event):
    global w
    w.move(id_ball, 12,5)
    w.move("fall", 0,5)
    
def btnClick_1(event):
    global w
    w.move(id_ball, -12,-5)
    w.move("fall", 0,-5)
    
w = tkinter.Canvas(baseFrame, width=500, height=400)
w.pack()
w.bind('<Button-1>', btnClick)
w.bind('<Button-3>', btnClick_1)

# 创建组件后返回id
id_ball = w.create_oval(20,20, 50,50, fill="green")

# 创建组件中使用tag属性
w.create_text(123,56, fill="red", text="ILovePython", tag="fall")
# 创建的时候如果没有指定tag可以利用addtag_withtag添加
# 同类函数还有 addtag_all, addtag_above, addtag_xxx等等
id_rectangle = w.create_rectangle(56,78, 173,110, fill="gray")
w.addtag_withtag("fall", id_rectangle)

baseFrame.mainloop()