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

头像制界面设计

在这里插入图片描述

avatar.png

在这里插入图片描述

界面

界面分析

背景图片:
- 顶部中央位置显示一个小孩背着书包的图片。这个图片是程序的背景，占据了大部分的窗口空间。
标题和按钮:
- 在图片上方，有一个标题栏，显示文本“在线姓氏头像制作”，使用隶书字体，字体大小为22，颜色为红色。
- 标题下方有一个按钮，上面有“ ★☆★ 踢我一下 ☆★☆ ”的文本，使用隶书字体，大小为14，背景色为#b0fcff。
输入区域:
- 在标题和按钮下方，有一个输入区域，分为几个部分：
  - 姓氏输入: 在输入区域的最左侧，有一个标签“输入姓氏”，用户可以在此输入框中输入姓氏。
  - 头像模板选择: 紧接着姓氏输入框的右侧，有一个下拉列表，用户可以从中选择不同的头像模板，如“献花男孩”、“风车男孩”等。
  - 印签文字输入: 在模板选择的下方，有一个标签“印签文字”，用户可以在此输入框中输入想要添加到头像上的印签文字。
  - 性别选择: 在印签文字输入框的下方，有一个标签“性别”，用户可以通过一个数值选择器（Spinbox）选择性别，选项为“男”或“女”。
装饰元素:
- 根据你提供的描述，程序中还可能包含一些装饰元素，如蓝色和黄色的圆形装饰，上面分别有文字“大”、“小”、“菜”、“~”。这些装饰元素可能被放置在窗口的右侧或其它空白区域，以增加视觉效果。

界面布局

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

主要组件

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

注意

最下面的输入区域我用的是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()