ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Python-GUI-Project图解指南:如何用自定义图片按钮升级Tkinter计算器颜值

Python-GUI-Project图解指南:如何用自定义图片按钮升级Tkinter计算器颜值 Python-GUI-Project图解指南如何用自定义图片按钮升级Tkinter计算器颜值【免费下载链接】Python-GUI-ProjectA Repositry that contains 20 GUI Projects on python Tkinter项目地址: https://gitcode.com/gh_mirrors/py/Python-GUI-ProjectPython-GUI-Project是一个收录了 20 多个Python Tkinter图形界面项目的开源仓库。本文以其中的Calculator with Images带图片的计算器为例手把手教你如何用自定义图片按钮加一张全屏背景图快速给Tkinter 计算器做一次颜值升级——不需要设计功底也不用重写任何计算逻辑。文中还包含项目运行步骤、新手常踩的 5 个坑以及仓库里 21 个现成 Tkinter 应用的路径清单。 项目概览20 个 Tkinter GUI 项目工具箱这个仓库完全基于 Python 自带的tkinter库构建项目从计算器到绘图、天气、记账覆盖面很广。常用项目路径一览项目路径图片版计算器本文主角Calculator with Images/文字版计算器对照组calculator/账单系统 Billing SystemBilling System/新闻头条 News HeadlinesInstant News Headlines (Tkinter NewsApi)/记事本 / 绘图 / 钢琴Notepad/·Paint Application/·Piano Application/天气 / 汇率转换 / 井字棋weather application/·currency/·Tic Tac Toe Game/完整项目列表可看仓库根目录的README.md。下面这张截图来自同仓库的Billing Software账单系统能直观感受到纯 Tkinter 控件应用的整体风格Python-GUI-Project仓库中的Tkinter账单系统Billing System应用截图 一键运行步骤快速开始运行图片版计算器只需 3 步git clone https://gitcode.com/gh_mirrors/py/Python-GUI-Project pip install Pillow python Calculator with Images/calculator_with_images.py⚠️ 注意示例代码里的图片路径是 Windows 绝对路径运行前必须先改成你自己电脑上的路径下文避坑指南有说明。 升级前后对比为什么文字按钮显得素仓库calculator/目录里有两个文字版计算器是绝佳的对照组calculator/tk-calculator.py每个按钮都用text9这种文字样式外观靠bg、fg、relief参数调节calculator/calculator2.py用循环统一生成按钮布局结构更简洁。但无论怎么调参数文字按钮终究是方块里一行字。而Calculator with Images/calculator_with_images.py做了一次关键改动逻辑不动只换皮肤——加减乘除四个计算函数一行不改只把 16 个Button的text换成image再铺一张全屏背景图。这就是改颜值成为低风险改动的核心思路。️ 图片按钮三步走图解法第 1 步准备两种图片素材项目已内置全部素材无需另外找图16 张按钮图50×50 PNG覆盖 1~9、0、、−、×、÷、、CLRCalculator with Images/calculator_buttons_50x50/1 张背景图300×430 PNG与窗口尺寸 1:1 匹配Calculator with Images/300x430_background.png窗口图标Calculator with Images/Calc-icon.ico第 2 步用 Pillow 加载图片tkinter不能直接显示 PNG需要用第三方库Pillow的ImageTk.PhotoImage把图片转成 Tkinter 可用的对象from PIL import ImageTk, Image bg ImageTk.PhotoImage(file.../300x430_background.png) Label(rt, imagebg).place(x0, y0) # 背景铺满窗口底层关键点背景就是一个占满窗口的Label放在 (0,0) 坐标所有按钮都叠在它上面。第 3 步把图片绑到 Button 上每 16 张 50×50 的按钮图各加载一次绑定到Button再用grid摆出 4 行按键Img1 ImageTk.PhotoImage(file.../calculator_buttons_50x50/1.png) Button(rt, border3, imageImg1, commandlambda: button_click(1)).grid(row1, column0)注意command仍然指向原来的button_click等逻辑函数——外观变了行为不变。️ 新手必看的 5 个常见坑忘记装 Pillowfrom PIL import ImageTk报ModuleNotFoundError→ 执行pip install Pillow。图片路径找不到原代码使用C:/Users/...这类 Windows 绝对路径代码中多处留有CHANGE PATH注释提示换机器运行必须逐一修改改成相对路径更稳妥。图片消失了PhotoImage对象如果不保存引用会被垃圾回收导致按钮图不显示。示例代码用Img1~ImgCLR全局变量保存了引用值得照抄。图片尺寸不匹配你的按钮图不是 50×50 的话可用Image.open(path).resize((50, 50))先缩放。text 和 image 混用Button一旦指定了imagetext参数就不会再显示不要两者都写。 同仓库其他现成的 Tkinter 应用想多看 Tkinter 的界面效果仓库里还有 21 个项目可直接运行除了上图的账单系统还有新闻头条、记事本、画图板、钢琴、井字棋等。例如新闻头条应用在Instant News Headlines (Tkinter NewsApi)/入口文件是其中的main.pyPython-GUI-Project仓库中新闻头条应用News Headlines的新闻主题插图/—Pngtree—vector creative hot news tag_4265321.png)✅ 总结升级 Tkinter 计算器颜值的 3 个要点备图按钮图与按键同尺寸50×50背景图与窗口同尺寸300×430转换用ImageTk.PhotoImage加载图片记得pip install Pillow替换Button的text换成image逻辑代码一行不改。完整示例代码在仓库Calculator with Images/calculator_with_images.py约 120 行照着改路径即可运行。【免费下载链接】Python-GUI-ProjectA Repositry that contains 20 GUI Projects on python Tkinter项目地址: https://gitcode.com/gh_mirrors/py/Python-GUI-Project创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表