前言

前面我们实现了整体的框架设计构思，这一节，我们使用python内置的GUI模块Tkiner实现主界面GUI的绘制。由于我之前已经讲解过Tkinter的基础操作，如果有遗忘的同学，可以跳转回去温习一下。

part2 主界面GUI与明细窗体GUI

一、实现主界面GUI

1. 实现过程

这里我们使用pycharm作为我们的集成开发工具，创建好项目名后，先创建一个GUI文件夹，在GUI文件夹里创建一个maingui.py的python文件作为我们主界面的GUI。最开始我们需要导入tkinter和tkinter.ttk，使用from的方式导入，可以简化我们代码中对模块的声明。接着我们定义一个MainGUI的类，继承自Tk，这样做的好处是可以直接用self表示当前窗口对象。不过这种写法要注意一点的是使用构造方法对当前MainGUI类进行初始化的时候需要对父类Tk进行显式初始化调用。

from tkinter import *
from tkinter.ttk import *

class MainGUI(Tk):
    # 通过构造方法进行初始化
    def __init__(self):
        # 因为我们继承Tk这个类，所以我们要先把Tk初始化
        super().__init__()

接着使用使用title对当前窗体进行命名，使用geometry设置当前窗体的大小，使用resizeable设置当前窗体大小可调范围。

self.title("学生教师信息管理")
self.geometry("1400x600+100+100")
self.resizable(0, 0)

再通过Label创建一个学生和教师的文本标签，使用Treeview定义显示学生和老师信息的表格。这里Treeview组件的设置方式需要记住Treeview构造对象时需要传入的参数 * columns设置每一列的标题； * show="headings"表示显示表头； * height表示显示表格的高度。 * 通过对象名.column可以设置每一列的对齐方式； * 通过对象名.heading设置每一列的标题。具体代码如下：

# 添加Treeview控件
self.Tree_student = Treeview(self, columns=("sno","sname","gender","profession","mobile","email"),
                             show="headings", height=20)
# 设置每一列的对齐方式
self.Tree_student.column("sno", width=80, anchor="center")
self.Tree_student.column("sname", width=80, anchor="center")
self.Tree_student.column("gender", width=60, anchor="center")
self.Tree_student.column("profession", width=120, anchor="center")
self.Tree_student.column("mobile", width=130, anchor="center")
self.Tree_student.column("email", width=150, anchor="center")

# 设置每个列的标题
self.Tree_student.heading("sno", text="学号")
self.Tree_student.heading("sname", text="姓名")
self.Tree_student.heading("gender", text="性别")
self.Tree_student.heading("profession", text="专业")
self.Tree_student.heading("mobile", text="手机号")
self.Tree_student.heading("email", text="电子邮箱")

# 展示表格
self.Tree_student.place(x=40, y=95)

2. 显示效果如下：

Treeview显示效果最后再分别添加三个按钮，分别表示添加、修改、删除，整个界面就做好了。 ```self.Button_add_teacher = Button(self, text="添加", width=10) self.Button_add_teacher.place(x=1060, y=548)

修改按钮

self.Button_update_teacher = Button(self, text="修改", width=10) self.Button_update_teacher.place(x=1160, y=548)

删除按钮

self.Button_delete_teacher = Button(self, text="删除", width=10) self.Button_delete_teacher.place(x=1260, y=548)

##### 主窗体的最终显示效果如下：
![主窗体GUI](https://upload-images.jianshu.io/upload_images/5845585-46e5a01faf8238ca.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

### 二、实现明细窗体
##### 1. 需求分析
主窗体已经搭建完成了，我们需要接下来点击主窗体中的列表信息某一项，可以弹出明细窗体。由于学生的明细窗体与教师的明细窗体本质上是相似的。所以我们把他们抽象成一个基类明细模板类`BaseDetail`，当我们需要创建学生明细窗体或者教师明细窗体时都可以从这个明细模板基类派生出来。 
##### 2. 实现过程
同样，我们在GUI文件夹下创建一个`basedetail`的python文件，定义一个`BaseDetail`的类，继承自`Toplevel`类，而不是继承自`Tk`类。这里继承自`Toplevel`表明我们打开一个新的顶级窗口，保留原有窗口。
接着我们在明细窗体中通过`PhotoImage`设置一个图片标题`top_banner`，我们把相应的素材图片放在根目录下的file文件夹下：

加载top_banner

self.Login_image = PhotoImage(file="../file/stu_detail_banner.png") self.Label_image = Label(self, image=self.Login_image) self.Label_image.place(x=0, y=0)

接着再设置一个容器pane，用来容纳后面的明细窗体中的显示各项姓名、学号、电话信息的组件。

self.Pane_detail = PanedWindow(self, width=592, height=421) self.Pane_detail.place(x=4, y=87)

最后再添加保存和关闭按钮，明细模板窗体就搭建完成了。
##### 显示效果：
![明细模板GUI](https://upload-images.jianshu.io/upload_images/5845585-682cbb31f3dc5d15.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

### 三、实现学生明细GUI
前面我们已经把明细模板做好了，现在我们只需要将明细模板派生出学生明细GUI即可。
##### 1. 实现过程
我们新建一个`studentdetail.py`文件,同时将GUI目录设置为Source Root，这样就能导入basedetail模块了。
StudentDetail类继承BaseDetail类，这样StudentDetail只要初始化后就可以调用，父类建好的明细模板窗体了。
我们先修改窗体的标题

self.Label_Title["text"] = "学生明细

然后分别添加学号、姓名、性别、出生日期、邮箱地址、所学专业、入学时间。性别选项我们使用`RadioButton`作为输入框外u，其余均使用`Entry`作为输入框。
这里再重提一下`RadioButton`的创建方式，一定要通过`IntVar`创建一个变量，然后使用`Radiobutton()`构建对象，参数`variable`的值设为我们定义的变量，这样我们才能将`RadioButton`绑定为同一组。
这里的代码我们可以写成下面这样：

self.Label_gender = Label(self.Pane_detail, text="性别") self.Label_gender.place(x=180, y=110) self.var_gender = IntVar() self.Radio_man = Radiobutton(self.Pane_detail,text="男",variable=self.var_gender, value=1) self.Radio_man.place(x=280, y=110) self.Radio_woman = Radiobutton(self.Pane_detail,text="女",variable=self.var_gender,value=2) self.Radio_woman.place(x=330, y=110)

``
其余的关于

Label、Entry`选项的写法，就不做过多重复说明了，详情可见完整代码。

2.学生明细窗体运行效果:

学生明细GUI.png

四、实现教师明细GUI

我们新建一个teachergui.py文件，内容和studentgui几乎相同，只要稍作修改即可。在Pane容器中将显示信息的组建修改为对应的教师选项即可。教师明细GUI

最后

至此，我们的GUI界面已经全部绘制完毕，下一节，我们将继续完成读取数据到系统的功能。即把文件里的数据加载到系统中，并展示到GUI中来。

前言