【案例】做一个电话簿（三）

文章目录

• ​​0. 前言​​
• ​​1. 设计 GUI​​
• ​​2. 代码汇总​​
• ​​3. 详细设计​​

• ​​3.1 Button 按钮​​
• ​​3.2 多行文本 Text​​

• ​​4. 运行结果​​
• ​​5. 下周计划​​

0. 前言

今天我们继续设计电话簿，今天的内容是构建 GUI 界面。

1. 设计 GUI

我们使用 tkinter 来完成。

随手画出我们的草图：

1. 左侧是一个电话簿列表，显示了我们所有的联系人；
2. 右上方是我们某个联系人的具体信息；
3. 右下方的上一个和下一个按钮可以改变详细信息；

2. 代码汇总

import tkinter as tk

# 界面对象的基本参数设置
root = tk.Tk()
root.title("电话簿")
root.geometry('1096x474+250+250')
# 设置界面是否可以随意拉伸
# root.resizable(False, False)

test_str = """

1.
王催化
Tel ：123-456
Mail    ：xxx@gmail.com
2.
王催化
Tel ：123-456
Mail    ：xxx@gmail.com
3.
王催化
Tel ：123-456
Mail    ：xxx@gmail.com
4.
王催化
Tel ：123-456
Mail    ：xxx@gmail.com

"""

def draw():
    """
    设计界面
    """
    # 放置多行文本
    text = tk.Text(root)
    text.grid(row=0, column=0, rowspan=3, columnspan=3)
    text.insert("insert", test_str)
    
    v = tk.StringVar()
    # 详细信息
    label = tk.Label(root, textvariable=v)
    label.grid(row=0, column=3, columnspan=3, rowspan=2)
    v.set(
    """
    1.
    王催化
    Tel ：123-456
    Mail    ：xxx@gmail.com
    """
    )
    
    
    
    # 按钮
    key = None
    lastOneBtn = tk.Button(
                    root,
                    text="上一个",
                    relief=tk.GROOVE,
                    command=lambda idx=key: lastOneBtn_command(idx))
    lastOneBtn.grid(row=2, column=3)
    SearchBtn = tk.Button(
                    root,
                    text="查找",
                    relief=tk.GROOVE,
                    command=lambda idx=key: SearchBtn_command(idx))
    SearchBtn.grid(row=2, column=4)
    NextBtn = tk.Button(
                    root,
                    text="下一个",
                    relief=tk.GROOVE,
                    command=lambda idx=key: NextBtn_command(idx))
    NextBtn.grid(row=2, column=5)
    
    
    
    
if __name__ == "__main__":
    draw()
    root.mainloop()

3. 详细设计

3.1 Button 按钮

def lastOneBtn_command(btn=None):
    """
    """
    pass
# 按钮
key = None
lastOneBtn = tk.Button(
    root,
    text="上一个",
    width=10,
    height=2,
    relief=tk.GROOVE,
    command=lambda idx=key: lastOneBtn_command(idx))
lastOneBtn.grid(row=2, column=3)

使用 tk.Button 即可定义一个 Button 按钮；使用 command 参数可以为该按钮绑定一个函数；​​relief​​ 参数可以设置按钮样式；对于按钮对象，使用 grid 参数可以布局按钮位置。

3.2 多行文本 Text

# 放置多行文本
text = tk.Text(root)
text.grid(row=0, column=0, rowspan=3, columnspan=3)
text.insert("insert", test_str)

多行文本采用 tk.Text 来创建即可；为多行文本对象插入内容，使用多行文本对象的 insert 方法即可。

4. 运行结果

5. 下周计划

• 优化界面，将数据库和 GUI 结合起来。