第六天 初涉GUI编程

在web编程的主流时代，GUI用的确实不多。学习这一块的目的计划承上启下，巩固下面向对象编程。学习项目及练习源码地址：
GitHub源码

关于Pytgon GUI

在昨天的学习内容里面有提及常用的几个GUI框架。

图形用户界面是由一个个组件组成，就像小孩“搭积木”一样最终组成了整个界面。有的组件还能在里面再放置其他组件，我们称为“容器”。

Tkinter编写一个GUI程序

一般步骤:

• 创建应用程序主窗口对象(也称:根窗口)

• 在主窗口中，添加各种可视化组件，比如:按钮(Button)、文本框(Label)等

• 通过几何布局管理器，管理组件的大小和位置

• 事件处理

  在组件上绑定各种用户事件。如：按钮点击

  from tkinter import * # 最好不要这样导入所有
  from tkinter import messagebox # 为什么要这样导入一次，前面已经有*了？
  
  def btn_click(e):
      messagebox.showinfo("Message","按钮点击！")
      print("点击了按钮")
  
  root = Tk(screenName="Hello World")
  root.title("GUI开发练习") # 设置标题
  root.geometry("500x400+100+200") # 设置画布大小
  btn001 = Button(root)
  btn001['text'] = "按钮一"
  btn001.bind("<Button-1>",btn_click) 
  
  btn001.pack() # 将按钮放在画布上
  
  root.mainloop() # 不这样窗口打开后自动关闭
  

Tkinter常用类介绍

Misc和Wm:

Tkinter的GUI组件有两个根父类，它们都直接继承了object类:

1. Misc:它是所有组件的根父类。
2. Wm:它主要提供了一些与窗口管理器通信的功能函数。

Tk

Misc和Wm派生出子类Tk，它代表应用程序的主窗口。一般应用程序都需要直接或间
接使用Tk。

Pack、Place、Grid

Pack、Place、Grid 是布局管理器。布局管理器管理组件的:大小、位置。通过布局管 理器可以将容器中的组件实现合理的排布。

BaseWidget

BaseWidget 是所有组件的父类

Widget

Widget是所有组件类的父类。Widget一共有四个父类:BaseWidget、Pack、Grid、
Place。意味着，所有GUI组件同时具备这四个父类的属性和方法。

GUI应用程序类的经典写法

使用面向对象的方式，可以更加合理的组织GUI应用程序的代码。
通过一个App类组织整个GUI程序，类App继承了Frame(一个容器组件)及通过继承拥有了父类的特性。通过构造函数 __init__()初始化窗口中的对象，通过createWidgets()方法创建窗口中的对象。示例代码

Label标签组件

Label(标签)主要用于显示文本信息，也可以显示图像。
如果显示是图像，则以像素为单位。默认值是根据具体显示的内容动态调整。

Options选项

可以通过Options设置组件的属性，从而控制组件的各种状态。比如:宽度、高度、颜色、位置等等。
我们可以通过三种方式设置Options选项，这在各种GUI组件中用法都一致。

• 创建对象时，使用可变参数

  btn = Button(self, fg="red", bg="blue")

• 创建对象后，使用字典索引方式

  btn = Button(self)
  btn['fg'] = "red"
  btn['bg'] = "blue"
  

• 创建对象后，使用 config()方法

  btn = Button(self)
  btn.config(fg="red", bg="blue")
  

常见组件属性一览

Button组件

Button(按钮)用来执行用户的单击操作。Button可以包含文本，也可以包含图像。按钮被单击后会自动调用对应事件绑定的方法。

Entry单行文本框

Entry用来接收一行字符串的控件。如果用户输入的文字长度长于Entry控件的宽度时, 文字会自动向后滚动

Text多行文本框

Text(多行文本框)的主要用于显示多行文本，还可以显示网页链接, 图片, HTML页面, 甚至 CSS 样式表，添加组件等。因此，也常被当做简单的文本处理器、文本编辑器或者 网页浏览器来使用。

Radiobutton单选按钮

Checkbutton复选按钮

canvas画布

canvas(画布)是一个矩形区域，可以放置图形、图像、 组件等。

布局管理器

tkinter提供的布局管理器帮助组织、管理在父组件中子组件的布局方式。tkinter提供了三种管理器:pack、grid、place。

grid布局管理器

grid表格布局，采用表格结构组织组件。子组件的位置由
行和列的单元格来确定，并且可以跨行和跨列，从而实现复
杂的布局

pack布局管理器

pack按照组件的创建顺序将子组件添加到父组件中，按照垂直或者水平的方向自然排布。如果不指定任何选项，默认在父组件中自顶向下垂直添加组件。

place 布局管理器

place 布局管理器可以通过坐标精确控制组件的位置，适用
于一些布局更加灵活的场景

事件处理

一个GUI应用整个生命周期都处在一个消息循环 (event
loop) 中。它等待事件的发生，并作出相应的处理。
Tkinter提供了用以处理相关事件的机制. 处理函数可被绑 定给各个控件的各种事件。
widget.bind(event, handler)
如果相关事件发生, handler函数会被触发, 事件对象
event会传递给handler函数.

组件对象的绑定

1. 通过command属性绑定(适合简单不需获取event对象)

   Button(root,text=”登录”,command=login)

2. 通过 bind()方法绑定(适合需要获取 event 对象)

   c1 = Canvas(); 
   c1.bind(“<Button-1>”,drawLine)
   

组件类的绑定

调用对象的bind_class函数，将该组件类所有的组件绑定事件:

w.bind_class(“Widget”,”event”,eventhanler)

菜单和工具栏

主菜单

主菜单一般包含:文件、编辑、帮助等，位于GUI窗口的上面。创建主菜单一般有如下4步:

1. 创建主菜单栏对象

   menubar = tk.Menu(root)

2. 创建菜单，并添加到主菜单栏对象

    file_menu = tk.Menu(menubar)
    menubar.add_cascade(label=”文件”,menu=file_menu) 
   

3. 添加菜单项到 2 步中的菜单

   file_menu.add_command(label=”打开”)
   file_menu.add_command(label=”保 存”,accelerator=”^p command=mySaveFile)
   file_menu.add_separator()
   file_menu.add_command(label=”退出”) 
   

4. 将主菜单栏添加到根窗口

   root[“menu”]=menubar

上下文菜单

快捷菜单(上下文菜单)是通过鼠标右键单击组件而弹出的菜单，一般是和这个组件相关的操作，比如:剪切、复制、粘贴、属性等。

1. 创建菜单

   menubar = tk.Menu(root) 
   menubar.add_command(label=”字体”)
   

2. 绑定鼠标右键单击事件

   def test(event):
       menubar.post(event.x_root,event.y_root) #在鼠标右键单击坐标处显示菜单
   root.bind(“<Button-3>”,test) # 在窗体绑定事件
   

其他组件

OptionMenu选择项

OptionMenu(选择项)用来做多选一，选中的项会在顶部显
示。

Scale移动滑块

Scale(移动滑块)用于在指定的数值区间，通过滑块的移动来选择值

颜色选择框

颜色选择框可以用来设置背景色、前景色、画笔颜色、字体颜色等等。

文件对话框

文件对话框帮助我们实现可视化的操作目录、操作文件。最后，将文件、目录的信息传入到程序中。

简单输入对话框

simpledialog(简单对话框)

通用消息框

messagebox(通用消息框)用于和用户简单的交互，用户点击确定、取消。

项目实战练习

编写一个记事本程序

需求分析

模仿windows的记事本，实现新建、保存等功能。

• 需要一个主菜单
• 需要一个右键菜单
• 最好能响应快捷

详细设计

练习代码