上一篇：Python小试牛刀：GUI（图形界面）实现计算器UI界面（一）-CSDN博客

在上一篇文章中介绍了Python GUI常用的库，以及运用GUI标准库tkinter仅设计了计算器的UI界面。

而在本篇文章，我将进一步完善计算器UI界面，实现鼠标放在在组件上即刻改变背景颜色，离开还原背景颜色，以及按钮触发也会有同样的效果。

在下一篇文章，我将完全实现计算器的全部功能，关注我，敬请耐心等待！

运行结果

程序设计

"""计算器界面（二）
"""# 通配符'*'
__all__ = ['main']# 计算器UI设计
class CalculatorUI:import tkinter as tkfrom tkinter import fontbase = tk.Tk()              # 新建窗口base.title('计算器')         # 设置标题base.geometry("458x400")    # 设置窗口像素大小# 全局变量labelData1 = tk.StringVar()  # 标签数据labelData2 = tk.StringVar()  # 标签数据# 设置字体样式setChineseFont = font.Font(family='Arial', size=20, weight='bold')setFont = font.Font(family='Helvetica', size=12, weight='bold')# 初始化设置labelData1.set('1+2=3')labelData2.set('3')# 主框架mainFrame = tk.LabelFrame(base, text='标准', borderwidth=2, relief=tk.FLAT, font=setChineseFont)mainFrame.pack(expand=True)# 标签框架labelFrame = tk.Frame(mainFrame, borderwidth=2, relief=tk.GROOVE)labelFrame.grid(columnspan=4)# 标签showLabel = tk.Label(labelFrame, textvariable=labelData1, anchor='e', width=26, font=setChineseFont)showLabel.pack()tk.Label(labelFrame, textvariable=labelData2, anchor='e', width=26, font=setChineseFont).pack()# 删除按钮clear = tk.Button(mainFrame, text='C', width=10, height=2, font=setFont)clear.grid(row=1, column=0)# 退格按钮backSpace = tk.Button(mainFrame, text='<-', width=10, height=2, font=setFont)backSpace.grid(row=1, column=1)# 余数（百分号）remainder = tk.Button(mainFrame, text='%', width=10, height=2, font=setFont)remainder.grid(row=1, column=2)# 除号division = tk.Button(mainFrame, text='➗', width=10, height=2, font=setFont)division.grid(row=1, column=3)# 7seven = tk.Button(mainFrame, text='7', width=10, height=2, font=setFont)seven.grid(row=2, column=0)# 8eight = tk.Button(mainFrame, text='8', width=10, height=2, font=setFont)eight.grid(row=2, column=1)# 9nine = tk.Button(mainFrame, text='9', width=10, height=2, font=setFont)nine.grid(row=2, column=2)# 乘号multiplication = tk.Button(mainFrame, text='✖', width=10, height=2, font=setFont)multiplication.grid(row=2, column=3)# 4four = tk.Button(mainFrame, text='4', width=10, height=2, font=setFont)four.grid(row=3, column=0)# 5five = tk.Button(mainFrame, text='5', width=10, height=2, font=setFont)five.grid(row=3, column=1)# 6six = tk.Button(mainFrame, text='6', width=10, height=2, font=setFont)six.grid(row=3, column=2)# 减法subtraction = tk.Button(mainFrame, text='➖', width=10, height=2, font=setFont)subtraction.grid(row=3, column=3)# 1one = tk.Button(mainFrame, text='1', width=10, height=2, font=setFont)one.grid(row=4, column=0)# 2two = tk.Button(mainFrame, text='2', width=10, height=2, font=setFont)two.grid(row=4, column=1)# 3three = tk.Button(mainFrame, text='3', width=10, height=2, font=setFont)three.grid(row=4, column=2)# 加法addition = tk.Button(mainFrame, text='➕', width=10, height=2, font=setFont)addition.grid(row=4, column=3)# 括号brackets = tk.Button(mainFrame, text='(  )', width=10, height=2, font=setFont)brackets.grid(row=5, column=0)# 0zero = tk.Button(mainFrame, text='0', width=10, height=2, font=setFont)zero.grid(row=5, column=1)# 小数点.dit = tk.Button(mainFrame, text='.', width=10, height=2, font=setFont)dit.grid(row=5, column=2)# 等于equal = tk.Button(mainFrame, text='=', width=10, height=2, background='#00BFFF', font=setFont)equal.grid(row=5, column=3)# 空白填充tk.Label(mainFrame, height=3, width=1).grid(row=1, column=4)  # 行填充tk.Label(mainFrame, height=3, width=1).grid(row=2, column=4)tk.Label(mainFrame, height=3, width=1).grid(row=3, column=4)tk.Label(mainFrame, height=3, width=1).grid(row=4, column=4)tk.Label(mainFrame, height=3, width=1).grid(row=5, column=4)tk.Label(mainFrame, height=1, width=16).grid(row=6, column=1)  # 列填充tk.Label(mainFrame, height=1, width=16).grid(row=6, column=3)# 初始化事件
def initUI(event):# 0-9UI.zero.config(background='#f0f0f0')        # 0UI.one.config(background='#f0f0f0')         # 1UI.two.config(background='#f0f0f0')         # 2UI.three.config(background='#f0f0f0')       # 3UI.four.config(background='#f0f0f0')        # 4UI.five.config(background='#f0f0f0')        # 5UI.six.config(background='#f0f0f0')         # 6UI.seven.config(background='#f0f0f0')       # 7UI.eight.config(background='#f0f0f0')       # 8UI.nine.config(background='#f0f0f0')        # 9# 特殊字符UI.clear.config(background='#f0f0f0')       # 删除UI.backSpace.config(background='#f0f0f0')   # 退格UI.remainder.config(background='#f0f0f0')   # 百分号/求余UI.division.config(background='#f0f0f0')    # 除号UI.multiplication.config(background='#f0f0f0')  # 乘号UI.subtraction.config(background='#f0f0f0')     # 减号UI.addition.config(background='#f0f0f0')        # 加号UI.equal.config(background='#00BFFF')           # 等于UI.brackets.config(background='#f0f0f0')        # 括号UI.dit.config(background='#f0f0f0')             # 小数点# 鼠标在组件上的焦点事件
# 0-9
# 0
def zeroBackground(event):UI.zero.config(background='pink')
def zeroReleaseBackground(event):UI.zero.config(state=tk.DISABLED, background='pink')UI.base.update()time.sleep(0.1)UI.zero.config(state=tk.NORMAL, background='#f0f0f0')zeroEvent(event)
# 1
def oneBackground(event):UI.one.config(background='pink')
def oneReleaseBackground(event):UI.one.config(state=tk.DISABLED, background='pink')UI.base.update()time.sleep(0.1)UI.one.config(state=tk.NORMAL, background='#f0f0f0')oneEvent(event)
# 2
def twoBackground(event):UI.two.config(background='pink')
def twoReleaseBackground(event):UI.two.config(state=tk.DISABLED, background='pink')UI.base.update()time.sleep(0.1)UI.two.config(state=tk.NORMAL, background='#f0f0f0')twoEvent(event)
# 3
def threeBackground(event):UI.three.config(background='pink')
def threeReleaseBackground(event):UI.three.config(state=tk.DISABLED, background='pink')UI.base.update()time.sleep(0.1)UI.three.config(state=tk.NORMAL, background='#f0f0f0')threeEvent(event)
# 4
def fourBackground(event):UI.four.config(background='pink')
def fourReleaseBackground(event):UI.four.config(state=tk.DISABLED, background='pink')UI.base.update()time.sleep(0.1)UI.four.config(state=tk.NORMAL, background='#f0f0f0')fourEvent(event)
# 5
def fiveBackground(event):UI.five.config(background='pink')
def fiveReleaseBackground(event):UI.five.config(state=tk.DISABLED, background='pink')UI.base.update()time.sleep(0.1)UI.five.config(state=tk.NORMAL, background='#f0f0f0')fiveEvent(event)
# 6
def sixBackground(event):UI.six.config(background='pink')
def sixReleaseBackground(event):UI.six.config(state=tk.DISABLED, background='pink')UI.base.update()time.sleep(0.1)UI.six.config(state=tk.NORMAL, background='#f0f0f0')sixEvent(event)
# 7
def sevenBackground(event):UI.seven.config(background='pink')
def sevenReleaseBackground(event):UI.seven.config(state=tk.DISABLED, background='pink')UI.base.update()time.sleep(0.1)UI.seven.config(state=tk.NORMAL, background='#f0f0f0')sevenEvent(event)
# 8
def eightBackground(event):UI.eight.config(background='pink')
def eightReleaseBackground(event):UI.eight.config(state=tk.DISABLED, background='pink')UI.base.update()time.sleep(0.1)UI.eight.config(state=tk.NORMAL, background='#f0f0f0')eightEvent(event)
# 9
def nineBackground(event):UI.nine.config(background='pink')
def nineReleaseBackground(event):UI.nine.config(state=tk.DISABLED, background='pink')UI.base.update()time.sleep(0.1)UI.nine.config(state=tk.NORMAL, background='#f0f0f0')nineEvent(event)# 特殊字符
# 删除
def clearBackground(event):UI.clear.config(background='pink')
def clearReleaseBackground(event):UI.clear.config(state=tk.DISABLED, background='pink')UI.base.update()time.sleep(0.1)UI.clear.config(state=tk.NORMAL, background='#f0f0f0')clearEvent(event)
# 退格
def backSpaceBackground(event):UI.backSpace.config(background='pink')
def backSpaceReleaseBackground(event):UI.backSpace.config(state=tk.DISABLED, background='pink')UI.base.update()time.sleep(0.1)UI.backSpace.config(state=tk.NORMAL, background='#f0f0f0')backSpaceEvent(event)
# 百分号/求余
def remainderBackground(event):UI.remainder.config(background='pink')
def remainderReleaseBackground(event):UI.remainder.config(state=tk.DISABLED, background='pink')UI.base.update()time.sleep(0.1)UI.remainder.config(state=tk.NORMAL, background='#f0f0f0')remainderEvent(event)
# 除号
def divisionBackground(event):UI.division.config(background='pink')
def divisionReleaseBackground(event):UI.division.config(state=tk.DISABLED, background='pink')UI.base.update()time.sleep(0.1)UI.division.config(state=tk.NORMAL, background='#f0f0f0')divisionEvent(event)
# 乘号
def multiplicationBackground(event):UI.multiplication.config(background='pink')
def multiplicationReleaseBackground(event):UI.multiplication.config(state=tk.DISABLED, background='pink')UI.base.update()time.sleep(0.1)UI.multiplication.config(state=tk.NORMAL, background='#f0f0f0')multiplicationEvent(event)
# 减号
def subtractionBackground(event):UI.subtraction.config(background='pink')
def subtractionReleaseBackground(event):UI.subtraction.config(state=tk.DISABLED, background='pink')UI.base.update()time.sleep(0.1)UI.subtraction.config(state=tk.NORMAL, background='#f0f0f0')subtractionEvent(event)
# 加号
def additionBackground(event):UI.addition.config(background='pink')
def additionReleaseBackground(event):UI.addition.config(state=tk.DISABLED, background='pink')UI.base.update()time.sleep(0.1)UI.addition.config(state=tk.NORMAL, background='#f0f0f0')additionEvent(event)
# 等于
def equalBackground(event):UI.equal.config(background='pink')
def equalReleaseBackground(event):UI.equal.config(state=tk.DISABLED, background='pink')UI.base.update()time.sleep(0.1)UI.equal.config(state=tk.NORMAL, background='#00BFFF')equalEvent(event)
# 括号
def bracketsBackground(event):UI.brackets.config(background='pink')
def bracketsReleaseBackground(event):UI.brackets.config(state=tk.DISABLED, background='pink')UI.base.update()time.sleep(0.1)UI.brackets.config(state=tk.NORMAL, background='#f0f0f0')bracketsEvent(event)
# 小数点
def ditBackground(event):UI.dit.config(background='pink')
def ditReleaseBackground(event):UI.dit.config(state=tk.DISABLED, background='pink')UI.base.update()time.sleep(0.1)UI.dit.config(state=tk.NORMAL, background='#f0f0f0')ditEvent(event)# 组件背景颜色
def widgetColor():# 0-9UI.zero.bind('<Motion>', zeroBackground)        # 0UI.one.bind('<Motion>', oneBackground)          # 1UI.two.bind('<Motion>', twoBackground)          # 2UI.three.bind('<Motion>', threeBackground)      # 3UI.four.bind('<Motion>', fourBackground)        # 4UI.five.bind('<Motion>', fiveBackground)        # 5UI.six.bind('<Motion>', sixBackground)          # 6UI.seven.bind('<Motion>', sevenBackground)      # 7UI.eight.bind('<Motion>', eightBackground)      # 8UI.nine.bind('<Motion>', nineBackground)        # 9# 特殊字符UI.clear.bind('<Motion>', clearBackground)                      # 删除UI.backSpace.bind('<Motion>', backSpaceBackground)              # 退格UI.remainder.bind('<Motion>', remainderBackground)              # 百分号/求余UI.division.bind('<Motion>', divisionBackground)                # 除号UI.multiplication.bind('<Motion>', multiplicationBackground)    # 乘号UI.subtraction.bind('<Motion>', subtractionBackground)          # 减号UI.addition.bind('<Motion>', additionBackground)                # 加号UI.equal.bind('<Motion>', equalBackground)                      # 等于UI.brackets.bind('<Motion>', bracketsBackground)                # 括号UI.dit.bind('<Motion>', ditBackground)                          # 小数点# 初始化UI.base.bind('<Leave>', initUI)# 按钮按下UI.base.bind('<KeyPress-0>', zeroReleaseBackground)     # 0UI.zero.bind('<Button-1>', zeroEvent)UI.base.bind('<KeyPress-1>', oneReleaseBackground)      # 1UI.one.bind('<Button-1>', oneEvent)UI.base.bind('<KeyPress-2>', twoReleaseBackground)      # 2UI.two.bind('<Button-1>', twoEvent)UI.base.bind('<KeyPress-3>', threeReleaseBackground)    # 3UI.three.bind('<Button-1>', threeEvent)UI.base.bind('<KeyPress-4>', fourReleaseBackground)     # 4UI.four.bind('<Button-1>', fourEvent)UI.base.bind('<KeyPress-5>', fiveReleaseBackground)     # 5UI.five.bind('<Button-1>', fiveEvent)UI.base.bind('<KeyPress-6>', sixReleaseBackground)      # 6UI.six.bind('<Button-1>', sixEvent)UI.base.bind('<KeyPress-7>', sevenReleaseBackground)    # 7UI.seven.bind('<Button-1>', sevenEvent)UI.base.bind('<KeyPress-8>', eightReleaseBackground)    # 8UI.eight.bind('<Button-1>', eightEvent)UI.base.bind('<KeyPress-9>', nineReleaseBackground)     # 9UI.nine.bind('<Button-1>', nineEvent)UI.base.bind('<KeyPress-Delete>', clearReleaseBackground)    # 删除UI.base.bind('<KeyPress-c>', clearReleaseBackground)         # 删除UI.base.bind('<Key-C>', clearReleaseBackground)              # 删除UI.clear.bind('<Button-1>', clearEvent)UI.base.bind('<KeyPress-BackSpace>', backSpaceReleaseBackground)  # 退格UI.backSpace.bind('<Button-1>', backSpaceEvent)UI.base.bind('<Shift-Key-%>', remainderReleaseBackground)         # 百分号、求余UI.remainder.bind('<Button-1>', remainderEvent)UI.base.bind('<KeyPress-slash>', divisionReleaseBackground)       # 除号UI.division.bind('<Button-1>', divisionEvent)UI.base.bind('<KeyPress-asterisk>', multiplicationReleaseBackground)    # 乘号UI.base.bind('<Shift-Key-*>', multiplicationReleaseBackground)          # 乘号UI.multiplication.bind('<Button-1>', multiplicationEvent)UI.base.bind('<KeyPress-minus>', subtractionReleaseBackground)          # 减号UI.subtraction.bind('<Button-1>', subtractionEvent)UI.base.bind('<KeyPress-plus>', additionReleaseBackground)              # 加号UI.base.bind('<Shift-Key-+>', additionReleaseBackground)                # 加号UI.addition.bind('<Button-1>', additionEvent)UI.base.bind('<KeyPress-Return>', equalReleaseBackground)               # 等号UI.base.bind('<KeyPress-equal>', equalReleaseBackground)                # 等号UI.equal.bind('<Button-1>', equalEvent)UI.base.bind('<Shift-Key-(>', bracketsReleaseBackground)                # 左括号UI.base.bind('<Shift-Key-)>', bracketsReleaseBackground)                # 右括号UI.brackets.bind('<Button-1>', bracketsEvent)UI.base.bind('<KeyPress-period>', ditReleaseBackground)                 # 小数点UI.dit.bind('<Button-1>', ditEvent)# 0 事件
def zeroEvent(event):UI.zero.config(activeforeground='gray')print(0)# 1 事件
def oneEvent(event):UI.one.config(activeforeground='gray')print(1)# 2 事件
def twoEvent(event):UI.two.config(activeforeground='gray')print(2)# 3 事件
def threeEvent(event):UI.three.config(activeforeground='gray')print(3)# 4 事件
def fourEvent(event):UI.four.config(activeforeground='gray')print(4)# 5 事件
def fiveEvent(event):UI.five.config(activeforeground='gray')print(5)# 6 事件
def sixEvent(event):UI.six.config(activeforeground='gray')print(6)# 7 事件
def sevenEvent(event):UI.seven.config(activeforeground='gray')print(7)# 8 事件
def eightEvent(event):UI.eight.config(activeforeground='gray')print(8)# 9 事件
def nineEvent(event):UI.nine.config(activeforeground='gray')print(9)# 删除 事件
def clearEvent(event):UI.clear.config(activeforeground='gray')print('clear')# 退格 事件
def backSpaceEvent(event):UI.backSpace.config(activeforeground='gray')print('backspace')# 求余 事件
def remainderEvent(event):UI.remainder.config(activeforeground='gray')print('remainder')# 除法 事件
def divisionEvent(event):UI.division.config(activeforeground='gray')print('division')# 乘法 事件
def multiplicationEvent(event):UI.multiplication.config(activeforeground='gray')print('multiplication')# 减法 事件
def subtractionEvent(event):UI.subtraction.config(activeforeground='gray')print('subtraction')# 加法 事件
def additionEvent(event):UI.addition.config(activeforeground='gray')print('addition')# 等于 事件
def equalEvent(event):UI.equal.config(activeforeground='gray')print('equal')# 括号 事件
def bracketsEvent(event):UI.brackets.config(activeforeground='gray')print('brackets')# 小数点 事件
def ditEvent(event):UI.dit.config(activeforeground='gray')print('dit')import tkinter as tk
import time
# 全局变量
UI = CalculatorUI()  # 计算器UI设计# 主函数
def main():widgetColor()       # 组件背景颜色改变UI.base.mainloop()  # 保持窗口运行# 代码测试
if __name__ == '__main__':main()
else:print(f'导入{__name__}模块')

作者：周华

创作日期：2023/11/1