文章目录

一、前言废话
二、设计分析
三、代码分步解析
- 1. 导入工具库
- 2. 创建应用程序窗口
- 3. 创建画布放置图片
- 4. 创建账号密码的标签
- 5. 创建文本框组件
- 6. 创建按钮组件
- 7. 设置按钮事件处理函数
四、复盘总结

一、前言废话

最近正式开始学习Python中GUI设计的最主要库之一：tkinter。

实在是憋不住了，写个啥东西都是只能在Python中运行，所以很想自己也能编写一个小软件，能够实现用户交互那种。

那么就必须学习关于GUI方面的知识。

与之前学习Python中的其他库不一样，以往总是先写内置的函数方法和属性，再与实际相结合，来解决生活工作中的问题。

这一次学习tkinter，我通过一个个实际的项目来逆向学习tkinter中的各种方法和属性。

因为对于这种实操性强、涉及内容比较多的库，采取这样的方式进行学习印象会更加深刻，同时更容易关注知识的主线脉络。

（个人见解）

二、设计分析

今日份练习是设计一个登录界面。

就像每一幢大楼在动手开工前，都需要有详细完整的设计图纸；同样的正式开始写代码构造这个登录界面之前，我们需要先画出一个蓝图，我们要设计怎样的一个登录界面。

于是我先动手在PPT里面画了样图。

Duang！Duang！Duang！这就是我想要制作出的界面样子。

当然这只是个人的设计想法，你们也可以按照自己的想法去设计。

但是重要的一定是先确定了设计图，分析了事件功能，再根据这个图最后去写代码。

接下来，我们再拆解一下整个设计界面

整个窗口的标题部分由图片与文字组成，图片就用的我个人头像，再配上文字 Nilvya办公系统。
右上角的窗口最小化、最大化以及关闭窗口在tkinter中会自动生成，这个就不用管了
配上一张符合主题的图片作为装饰
文本信息，提示用户分别输入账号和密码
文本框，用来输入账号和密码的
“登录”按钮，背景色为青蓝色，风格为平面风。关于事件处理，如果账号密码正确则显示 [登录成功]；如果账号密码错误则显示 [账号或密码错误]，并且清除已经输入的账号和密码

好啦，整个设计界面以及处理事件就分析得差不多了，接下来就是正式开始写代码了。

开干！

三、代码分步解析

整个设计的思路、步骤以及代码，咱们采用分段一一就是演示说明。

如果不想看分步解析的，也可以直接跳转到四、复盘总结，有完整的代码。

——

1. 导入工具库

import tkinter as tk
import tkinter.messagebox
from PIL import Image           # 导入Pillow，为了对图片进行处理

这里导入了Pillow，是为了对办公图片进行处理，裁剪合适的宽高。

——

2. 创建应用程序窗口

window = tk.Tk()
window.title('Nilvya办公系统')  # 更改窗口标题
window.geometry('327x272')     # 根据样图宽高比例，设定合适的窗口大小
window.iconphoto(False, tk.PhotoImage(file='头像.png'))   # 更改窗口图标window.mainloop()  # 启动消息循环

需要重点强调两个地方

窗口宽高，是根据设计图本身的宽高进行等比例缩放的，只要确保宽高比一致就好
关于更改窗口图标的方法操作，可以查看我写的【学习日常随记】tkinter设置窗口图标的三种方式

——

3. 创建画布放置图片

# 图片宽高像素更改
# im = Image.open('办公图片.png')
# shortsizedIm = im.resize((327,86))
# shortizedIm.save('办公图片新.png')canvas = tk.Canvas(window, width=327, height=84, bg='grey')
image_file = tk.PhotoImage(file='办公图片新.png')
image = canvas.create_image(163.5, 0,  anchor='n', image=image_file)
canvas.place(x=0,y=10)

需要强调三个地方：

画布canvas的宽高、位置放置，以及图片需要的大小，这些都需要根据设计图本身去确定（最好的方式就是在设计的时候就标注出具体数值，能够有效避免重复调试）
如果图片大小不合适，可以利用Pillow模块将图片裁剪为合适的大小
关于anchor锚点的知识，可以参考此篇小文章【学习日常随记】一分钟搞懂tkinter中的锚点(anchor)问题

进行到这一步，我们看看运行程序是啥样子。

——

4. 创建账号密码的标签

labelName = tk.Label(window,text='账号  ',font=('微软雅黑', 12),fg='grey',justify=tk.RIGHT)
labelName.place(x=65,y=120)labelPwd = tk.Label(window,text='密码  ',font=('微软雅黑', 12),fg='grey',justify=tk.RIGHT)
labelPwd.place(x=65,y=160)

text 设置文本内容
font 设置字体以及字号
fg 设置文本颜色
justify 设置对齐方式

——

5. 创建文本框组件

# 创建字符串变量和文本框组件，同时设置关联的变量
varName = tk.StringVar(window, value='')
entryName = tk.Entry(window,textvariable=varName)
entryName.place(x=120,y=124)varPwd = tk.StringVar(window, value='')
entryPwd = tk.Entry(window,show='*',textvariable=varPwd)
entryPwd.place(x=120,y=164)

这里最核心就是要知道，通过tk.StringVar我们实现获取用户输入信息的值就行。

——

6. 创建按钮组件

buttonOk = tk.Button(window,text='登  录',bg='#%02x%02x%02x' %(5, 187, 251),fg='white',relief='flat',command=login)
buttonOk.place(x=65,y=200, width=200, height=30)

这里要重点提示的：

我们可以自己输入RGB值自定义颜色，其方法如代码中bg='#%02x%02x%02x' %(5, 187, 251)所示
relief 可以设置其按钮的样式，这里我们是扁平风格
command 链接事件处理函数

到这里我们怎么窗口样式就设计好了，最后再补上相关的事件处理函数就行。

——

7. 设置按钮事件处理函数

def login():# 获取用户名和密码  name = entryName.get()    # 获取文本框中输入的账号名pwd = entryPwd.get()         # 获取密码框中输入的密码if name == 'nilvya' and pwd == '123456':tk.messagebox.showinfo(title='恭喜',message='登录成功!')else:tk.messagebox.showerror('警告', message='用户名或密码错误')varName.set('')                # 清空文本框varPwd.set('')                   # 清空密码框

tk.messagebox.showinfo 显示提示信息
tk.messagebox.showerror 显示警告信息
varName.set('') 和 varPwd.set('') 实现文本框信息清除

四、复盘总结

完整的代码挂在这里：

import tkinter as tk
import tkinter.messagebox
from PIL import Image           # 导入Pillow，为了对图片进行处理# 登录按钮事件处理函数
def login():# 获取用户名和密码  name = entryName.get()    # 获取文本框中输入的账号名pwd = entryPwd.get()         # 获取密码框中输入的密码if name == 'nilvya' and pwd == '123456':tk.messagebox.showinfo(title='恭喜',message='登录成功!')else:tk.messagebox.showerror('警告', message='用户名或密码错误')varName.set('')                # 清空文本框varPwd.set('')                   # 清空密码框# 第一步：创建应用程序窗口
window = tk.Tk()
window.title('Nilvya办公系统')
window.geometry('327x272')     # 根据样图宽高比例，设定合适的窗口大小
window.iconphoto(False, tk.PhotoImage(file='头像.png'))    # 更改窗口图标# 第二步：创建画布放置图片
# 图片宽高像素更改
# im = Image.open('办公图片.png')
# shortsizedIm = im.resize((327,86))  更改图片的宽高
# shortizedIm.save('办公图片新.png')canvas = tk.Canvas(window, width=327, height=84, bg='grey')
image_file = tk.PhotoImage(file='办公图片新.png')
image = canvas.create_image(163.5, 0,  anchor='n', image=image_file)
canvas.place(x=0,y=10)# 第三步：创建账号密码的标签
labelName = tk.Label(window,text='账号  ',font=('微软雅黑', 12),fg='grey',justify=tk.RIGHT)
labelName.place(x=65,y=120)labelPwd = tk.Label(window,text='密码  ',font=('微软雅黑', 12),fg='grey',justify=tk.RIGHT)
labelPwd.place(x=65,y=160)# 第四步：创建字符串变量和文本框组件，同时设置关联的变量
varName = tk.StringVar(window, value='')
entryName = tk.Entry(window,textvariable=varName)
entryName.place(x=120,y=124)varPwd = tk.StringVar(window, value='')
entryPwd = tk.Entry(window,show='*',textvariable=varPwd)
entryPwd.place(x=120,y=164)# 第五步：创建按钮组件，同时设置按钮事件处理函数
buttonOk = tk.Button(window,text='登  录',bg='#%02x%02x%02x' %(5, 187, 251),fg='white',relief='flat',command=login)
buttonOk.place(x=65,y=200, width=200, height=30)# 启动消息循环
window.mainloop()

最后再复盘一下，大家可以根据以下信息自行在脑海中回忆下：

本次初步学习了tkinter中五种控件 Label、Canvas、Button、Entry和Messagebox，它们各自的作用功能和控件下的一些常用的属性设置。
一些重要的知识技巧：如何自定义窗口图标、锚点的知识、如何关联用户输入信息的变量、如何自定义RGB颜色等。
程序之外的事情，在正式动手之前，画好整个界面的设计图，甚至将颜色、大小、位置都标注出来（有精确的数值），这很重要！
在这过程中也发现一些问题：比如将各个控件进行窗口布置位置的时候，需要经常性进行不断调试，才能找准x y的坐标，有点麻烦。还有窗口改变了大小，我们的控件不会自动改变大小，比如我将窗口放大，它就是这样子了。(ಥ_ಥ)

【tkinter探索之旅】小试牛刀：编写一个登录界面相关推荐

label qt 自动换行_QT编写一个登录界面
前言继上篇:一起学Qt之基础篇---入门今天上手实操用QT编写一个登录界面~ 系统权限这个词大家肯定不陌生,你进入一个网站也是,如果不登录,就是以游客的身份进去的,要想看到某些信息肯定需要进行登录 ...
一步步展示如何用C#和ACCESS编写一个登录界面
** 登录界面简易教程 ** 前段时间老师要求做一个登录界面来熟悉C#的操作,于是在看了很多文章后终于编出一个小程序.为了让以后入门的新手不用再找一大堆的文章来慢慢摸索,现在决定分享一下我的编写过程, ...
Android编写一个登录界面，利用数据库实现记住密码，注册账号，强制下线，以及类似QQ的下拉列表登录功能
首先呢,看到这么长的标题,是不是感觉这些功能有点难以实现呢,哈哈,其实并没有想象中的那么复杂,下面就跟着笔者来一起学习一下这些功能是怎么实现的吧! 1.建立一个所有活动的父类,继承自Appcompat ...
c语言小游戏vc,C语言探索之旅：第一个C语言小游戏
C语言探索之旅:第一个C语言小游戏-1.jpg (37.05 KB, 下载次数: 0) 2018-10-8 19:23 上传内容简介 1.课程纲领 2.第一部分第八课:第一个C语言小游戏 3.第一部 ...
vue编写一个登录页面，使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换
编写一个登录页面,使用Tab栏实现"账号登录"和"二维码登录"这两种方式的切换,并通过transition组件结合animate.css实现切换时的动画效果 1 ...
vue 创建一个登录界面
vue创建一个登录界面 (1)创建登录界面和主页 (2)配置路由 (3)配置main.js (4)配置App.vue (5)登录页面 (6)主页面用到的组件参考链接 (1)创建登录界面和主页打开 ...
flutter 登录和退出登录_Flutter从入门到奔溃（一）：撸一个登录界面
Flutter从入门到奔溃(一):撸一个登录界面前记跨平台开发目前有3种途径:ReactNative,Weex,Flutter,至于他们之间的区别以及如何取舍,我觉得这在移动端工程师的圈子里已经讨 ...
写一个登录界面——用窗体界面实现
写一个登录界面--用窗体界面实现我们在上网的时候总能看到各种各样的窗体界面,比如:网页角落突然弹出的小广告.登录界面.画图板--接下来我就来讲讲如何创建一个窗体界面并制作一个登录界面. 窗体类的英文 ...
用html和css语言编写一个登录页面,简单css登录页面
CSS布局HTML小编今天和大家分享一个简单的登录界面CSS代码登陆微信登陆QQ登陆注册 #zuo{ width: 500px; height: 540px; background: whi ...

【tkinter探索之旅】小试牛刀：编写一个登录界面