02 tkinter有趣项目-头像制作-界面设计

头像制界面设计

**avatar.png**

**界面**

界面分析

1. 背景图片:

   • 顶部中央位置显示一个小孩背着书包的图片。这个图片是程序的背景，占据了大部分的窗口空间。

2. 标题和按钮:

   • 在图片上方，有一个标题栏，显示文本“在线姓氏头像制作”，使用隶书字体，字体大小为22，颜色为红色。
   • 标题下方有一个按钮，上面有“ ★☆★ 踢我一下 ☆★☆ ”的文本，使用隶书字体，大小为14，背景色为#b0fcff。

3. 输入区域:

   • 在标题和按钮下方，有一个输入区域，分为几个部分：
     • 姓氏输入: 在输入区域的最左侧，有一个标签“输入姓氏”，用户可以在此输入框中输入姓氏。
     • 头像模板选择: 紧接着姓氏输入框的右侧，有一个下拉列表，用户可以从中选择不同的头像模板，如“献花男孩”、“风车男孩”等。
     • 印签文字输入: 在模板选择的下方，有一个标签“印签文字”，用户可以在此输入框中输入想要添加到头像上的印签文字。
     • 性别选择: 在印签文字输入框的下方，有一个标签“性别”，用户可以通过一个数值选择器（Spinbox）选择性别，选项为“男”或“女”。

4. 装饰元素:

   • 根据你提供的描述，程序中还可能包含一些装饰元素，如蓝色和黄色的圆形装饰，上面分别有文字“大”、“小”、“菜”、“~”。这些装饰元素可能被放置在窗口的右侧或其它空白区域，以增加视觉效果。

界面布局

• 主窗口标题: “头像制作”
• 窗口大小: 600x500像素，位置偏移屏幕左上角1200x50像素
• 窗口属性: 不可调整大小，始终位于其他窗口之上

主要组件

1. 背景图片: 显示一个小孩背着书包的图片，背景为浅色。
2. 标题: “在线姓氏头像制作”，字体为隶书，大小为22，颜色为红色。
3. 按钮: 文本为" ★☆★ 踢我一下 ☆★☆ "，字体为隶书，大小为14，背景色为#b0fcff。
4. 输入区域:
   • 姓氏输入: 用户可以输入姓氏。
   • 头像模板选择: 提供多个头像模板供用户选择，如"献花男孩"、"风车男孩"等。
   • 印签文字输入: 用户可以输入想要添加到头像上的印签文字。
   • 性别选择: 用户可以选择性别，选项为"男"或"女"。

注意

最下面的输入区域我用的是frame组件，可以让这个组件还是按照pack布局在root窗口上，四个小组件被frame组件包裹起来，它们之间按照grid布局。我用的是这个蠢方法，我估计还有更加简洁方便的方式。相信看我文章的大佬们心中有了更好的方法，希望可以教教小趴菜。咋们一起学习，一起进步啦，相信咋们是最棒的，加油，么么哒！

程序代码解析

from tkinter import *
from tkinter import ttk
from PIL import Image, ImageTk

# 导入Tkinter库及其扩展ttk，以及PIL库用于图像处理。

root = Tk()
# 创建Tkinter的主窗口实例。

root.title('头像制作')
# 设置窗口标题为“头像制作”。

root.geometry('600x500+1200+50')
# 设置窗口大小为600x500像素，并指定窗口在屏幕上的位置（x=1200, y=50）。

root.resizable(False, False)
# 设置窗口大小不可调整。

root.attributes("-topmost", True)
# 设置窗口始终在其他窗口之上。

img = Image.open('avatar.png')
# 使用PIL库打开名为'avatar.png'的图片文件。

img = img.resize((464, 364))
# 将图片调整为464x364像素大小。

img = ImageTk.PhotoImage(img)
# 将PIL图像转换为Tkinter可以使用的PhotoImage对象。

# 创建一个Label组件，用于显示图片，并将其添加到窗口中。
Label(root, image=img).pack()

# 创建一个Label组件，显示文本“在线姓氏头像制作”，设置字体和前景色，并将其添加到窗口中。
Label(root, text='在线姓氏头像制作', font=("隶书", 22), fg='red').pack()

# 创建一个按钮，显示特定文本和样式，并将其添加到窗口中。
Button(root, text=' ★☆★ 踢我一下 ☆★☆ ', font=("隶书", 14), width='33', bg='#b0fcff').pack()

name = StringVar()
# 创建一个StringVar变量，用于存储输入框的值。

name.set('宇宙第一')
# 初始化StringVar变量的值为“宇宙第一”。

text = StringVar()
# 创建另一个StringVar变量，用于存储另一个输入框的值。

text.set('小趴菜~')
# 初始化StringVar变量的值为“小趴菜~”。

number_int_var = StringVar()
# 创建一个StringVar变量，用于存储下拉列表的值。

frame = Frame(root)
# 创建一个Frame组件，作为其他组件的容器。

frame.pack()
# 将Frame组件添加到窗口中。

Label(frame, text='输入姓氏', font=("隶书", 20)).grid(row=0, column=0)
# 在Frame中创建一个标签，显示文本“输入姓氏”。

Entry(frame, textvariable=name, font=("微软雅黑", 10)).grid(row=0, column=1)
# 创建一个输入框，与name变量绑定，并设置字体。

Label(frame, text='头像模板', font=("隶书", 20)).grid(row=0, column=2)
# 创建一个标签，显示文本“头像模板”。

numberChosen = ttk.Combobox(frame, textvariable=number_int_var)
# 创建一个下拉列表组件，与number_int_var变量绑定。

numberChosen['values'] = (
     '献花男孩',
     '风车男孩',
     '可爱男孩',
     '摆酷男孩',
     '可爱女孩',
     '接花女孩',
     '提琴女孩',
     '口罩女孩'
)
# 设置下拉列表的选项。

numberChosen.grid(row=0, column=3)
# 将下拉列表添加到Frame中。

numberChosen.set('接花女孩')
# 默认选中下拉列表中的“接花女孩”。

Label(frame, text='印签文字', font=("隶书", 20)).grid(row=1, column=0)
# 创建一个标签，显示文本“印签文字”。

Entry(frame, textvariable=text, font=("微软雅黑", 10)).grid(row=1, column=1)
# 创建一个输入框，与text变量绑定，并设置字体。

Label(frame, text='性别', font=("隶书", 20)).grid(row=1, column=2)
# 创建一个标签，显示文本“性别”。

Spinbox(frame, from_=0, to=10, values=("男", "女"), font=("微软雅黑", 10)).grid(row=1, column=3)
# 创建一个选择框，允许用户选择“男”或“女”。

# 运行程序
if __name__ == '__main__':
     root.mainloop()
# 如果这个脚本是直接运行的，而不是被导入的，则进入Tkinter的主事件循环，开始显示窗口并响应用户操作。

把程序封装成一个类方便后面使用

import tkinter as tk
from tkinter import ttk
from PIL import Image, ImageTk


# 导入所需的模块。tkinter是Python的标准GUI库，ttk是tkinter的扩展，PIL用于图像处理。
class AvatarMaker(tk.Tk):
    # 定义一个名为AvatarMaker的类，继承自tk.Tk，即Tkinter的主窗口类。

    def __init__(self):
        super().__init__()
        # 调用父类的构造函数，初始化窗口。

        self.numberChosen = '献花男孩'
        self.title('头像制作')
        # 设置窗口标题为“头像制作”。

        self.geometry('600x500+1200+50')
        # 设置窗口大小为600x500像素，并指定窗口在屏幕上的位置（x=1200, y=50）。

        self.resizable(False, False)
        # 设置窗口大小不可调整。

        self.attributes("-topmost", True)
        # 设置窗口始终在其他窗口之上。

        # 加载并显示头像图片
        self.img = Image.open('avatar.png')
        # 使用PIL库打开名为'avatar.png'的图片文件。

        self.img = self.img.resize((464, 364))
        # 将图片调整为464x364像素大小。

        self.photo_img = ImageTk.PhotoImage(self.img)
        # 将PIL图像转换为Tkinter可以使用的PhotoImage对象。

        self.label_image = tk.Label(self, image=self.photo_img)
        # 创建一个Label组件，用于显示图片。

        self.label_image.pack()
        # 将Label组件添加到窗口中。

        # 添加标题
        self.label_title = tk.Label(self, text='在线姓氏头像制作', font=("隶书", 22), fg='red')
        # 创建一个Label组件，显示文本“在线姓氏头像制作”，设置字体和前景色。

        self.label_title.pack()
        # 将Label组件添加到窗口中。

        # 添加按钮
        self.button_kick = tk.Button(self, text=' ★☆★ 踢我一下 ☆★☆ ', font=("隶书", 14), width='33', bg='#b0fcff')
        # 创建一个按钮，显示特定文本和样式。

        self.button_kick.pack()
        # 将按钮添加到窗口中。

        # 创建输入框和下拉列表的变量
        self.name_var = tk.StringVar(value='宇宙第一')
        # 创建一个StringVar变量，用于存储输入框的值，并初始化为“宇宙第一”。

        self.text_var = tk.StringVar(value='小趴菜~')
        # 创建另一个StringVar变量，用于存储另一个输入框的值，并初始化为“小趴菜~”。

        self.number_int_var = tk.StringVar()
        # 创建一个StringVar变量，用于存储下拉列表的值。

        # 创建输入框和下拉列表
        self.create_widgets()
        # 调用create_widgets方法来创建其他界面组件。

    def create_widgets(self):
        frame = tk.Frame(self)
        # 创建一个Frame组件，作为其他组件的容器。

        frame.pack()
        # 将Frame组件添加到窗口中。

        tk.Label(frame, text='输入姓氏', font=("隶书", 20)).grid(row=0, column=0)
        # 在Frame中创建一个标签，显示文本“输入姓氏”。

        tk.Entry(frame, textvariable=self.name_var, font=("微软雅黑", 10)).grid(row=0, column=1)
        # 创建一个输入框，与self.name_var变量绑定，并设置字体。

        tk.Label(frame, text='头像模板', font=("隶书", 20)).grid(row=0, column=2)
        # 创建一个标签，显示文本“头像模板”。

        self.numberChosen = ttk.Combobox(frame, textvariable=self.number_int_var)
        # 创建一个下拉列表组件，与self.number_int_var变量绑定。

        self.numberChosen['values'] = (
            '献花男孩', '风车男孩', '可爱男孩', '摆酷男孩', '可爱女孩', '接花女孩', '提琴女孩', '口罩女孩')
        # 设置下拉列表的选项。

        self.numberChosen.grid(row=0, column=3)
        # 将下拉列表添加到Frame中。

        self.numberChosen.set('献花男孩')
        # 默认选中下拉列表中的“献花男孩”。

        tk.Label(frame, text='印签文字', font=("隶书", 20)).grid(row=1, column=0)
        # 创建一个标签，显示文本“印签文字”。

        tk.Entry(frame, textvariable=self.text_var, font=("微软雅黑", 10)).grid(row=1, column=1)
        # 创建一个输入框，与self.text_var变量绑定，并设置字体。

        tk.Label(frame, text='性别', font=("隶书", 20)).grid(row=1, column=2)
        # 创建一个标签，显示文本“性别”。

        tk.Spinbox(frame, from_=0, to=10, values=("男", "女"), font=("微软雅黑", 10)).grid(row=1, column=3)
        # 创建一个选择框，允许用户选择“男”或“女”。

        # 运行程序


if __name__ == '__main__':
    # 如果这个脚本是直接运行的，而不是被导入的，则创建AvatarMaker类的实例。
    app = AvatarMaker()
    # 进入Tkinter的主事件循环，开始显示窗口并响应用户操作。
    app.mainloop()

注意事项

• 确保avatar.png图片文件与程序在同一目录下，否则需要修改图片路径。
• 该程序目前只提供了一个静态的头像背景，没有实现动态生成头像的功能。如果需要进一步开发，可以考虑集成图像处理库来根据用户输入生成头像。

可能的扩展

• 实现一个功能，根据用户输入的姓氏、选择的模板和印签文字，动态生成并显示个性化的头像。
• 增加保存功能，允许用户保存生成的头像到本地文件系统。

以上就是对程序的简单介绍和笔记。希望对你有所帮助！