Python小试牛刀：GUI（图形界面）实现计算器UI界面(二)

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

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

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

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

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

运行结果

程序设计

"""
    计算器界面（二）
"""

# 通配符'*'
__all__ = ['main']


# 计算器UI设计
class CalculatorUI:

    import tkinter as tk
    from tkinter import font

    base = 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)

    # 7
    seven = tk.Button(mainFrame, text='7', width=10, height=2, font=setFont)
    seven.grid(row=2, column=0)
    # 8
    eight = tk.Button(mainFrame, text='8', width=10, height=2, font=setFont)
    eight.grid(row=2, column=1)
    # 9
    nine = 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)

    # 4
    four = tk.Button(mainFrame, text='4', width=10, height=2, font=setFont)
    four.grid(row=3, column=0)
    # 5
    five = tk.Button(mainFrame, text='5', width=10, height=2, font=setFont)
    five.grid(row=3, column=1)
    # 6
    six = 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)

    # 1
    one = tk.Button(mainFrame, text='1', width=10, height=2, font=setFont)
    one.grid(row=4, column=0)
    # 2
    two = tk.Button(mainFrame, text='2', width=10, height=2, font=setFont)
    two.grid(row=4, column=1)
    # 3
    three = 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)
    # 0
    zero = 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-9
    UI.zero.config(background='#f0f0f0')        # 0
    UI.one.config(background='#f0f0f0')         # 1
    UI.two.config(background='#f0f0f0')         # 2
    UI.three.config(background='#f0f0f0')       # 3
    UI.four.config(background='#f0f0f0')        # 4
    UI.five.config(background='#f0f0f0')        # 5
    UI.six.config(background='#f0f0f0')         # 6
    UI.seven.config(background='#f0f0f0')       # 7
    UI.eight.config(background='#f0f0f0')       # 8
    UI.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-9
    UI.zero.bind('', zeroBackground)        # 0
    UI.one.bind('', oneBackground)          # 1
    UI.two.bind('', twoBackground)          # 2
    UI.three.bind('', threeBackground)      # 3
    UI.four.bind('', fourBackground)        # 4
    UI.five.bind('', fiveBackground)        # 5
    UI.six.bind('', sixBackground)          # 6
    UI.seven.bind('', sevenBackground)      # 7
    UI.eight.bind('', eightBackground)      # 8
    UI.nine.bind('', nineBackground)        # 9
    # 特殊字符
    UI.clear.bind('', clearBackground)                      # 删除
    UI.backSpace.bind('', backSpaceBackground)              # 退格
    UI.remainder.bind('', remainderBackground)              # 百分号/求余
    UI.division.bind('', divisionBackground)                # 除号
    UI.multiplication.bind('', multiplicationBackground)    # 乘号
    UI.subtraction.bind('', subtractionBackground)          # 减号
    UI.addition.bind('', additionBackground)                # 加号
    UI.equal.bind('', equalBackground)                      # 等于
    UI.brackets.bind('', bracketsBackground)                # 括号
    UI.dit.bind('', ditBackground)                          # 小数点

    # 初始化
    UI.base.bind('', initUI)

    # 按钮按下
    UI.base.bind('', zeroReleaseBackground)     # 0
    UI.zero.bind('', zeroEvent)
    UI.base.bind('', oneReleaseBackground)      # 1
    UI.one.bind('', oneEvent)
    UI.base.bind('', twoReleaseBackground)      # 2
    UI.two.bind('', twoEvent)
    UI.base.bind('', threeReleaseBackground)    # 3
    UI.three.bind('', threeEvent)
    UI.base.bind('', fourReleaseBackground)     # 4
    UI.four.bind('', fourEvent)
    UI.base.bind('', fiveReleaseBackground)     # 5
    UI.five.bind('', fiveEvent)
    UI.base.bind('', sixReleaseBackground)      # 6
    UI.six.bind('', sixEvent)
    UI.base.bind('', sevenReleaseBackground)    # 7
    UI.seven.bind('', sevenEvent)
    UI.base.bind('', eightReleaseBackground)    # 8
    UI.eight.bind('', eightEvent)
    UI.base.bind('', nineReleaseBackground)     # 9
    UI.nine.bind('', nineEvent)

    UI.base.bind('', clearReleaseBackground)    # 删除
    UI.base.bind('', clearReleaseBackground)         # 删除
    UI.base.bind('', clearReleaseBackground)              # 删除
    UI.clear.bind('', clearEvent)
    UI.base.bind('', backSpaceReleaseBackground)  # 退格
    UI.backSpace.bind('', backSpaceEvent)
    UI.base.bind('', remainderReleaseBackground)         # 百分号、求余
    UI.remainder.bind('', remainderEvent)
    UI.base.bind('', divisionReleaseBackground)       # 除号
    UI.division.bind('', divisionEvent)
    UI.base.bind('', multiplicationReleaseBackground)    # 乘号
    UI.base.bind('', multiplicationReleaseBackground)          # 乘号
    UI.multiplication.bind('', multiplicationEvent)
    UI.base.bind('', subtractionReleaseBackground)          # 减号
    UI.subtraction.bind('', subtractionEvent)
    UI.base.bind('', additionReleaseBackground)              # 加号
    UI.base.bind('', additionReleaseBackground)                # 加号
    UI.addition.bind('', additionEvent)
    UI.base.bind('', equalReleaseBackground)               # 等号
    UI.base.bind('', equalReleaseBackground)                # 等号
    UI.equal.bind('', equalEvent)
    UI.base.bind('', bracketsReleaseBackground)                # 左括号
    UI.base.bind('', bracketsReleaseBackground)                # 右括号
    UI.brackets.bind('', bracketsEvent)
    UI.base.bind('', ditReleaseBackground)                 # 小数点
    UI.dit.bind('', 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