引言

在之前尝试实现的四按键加法计算器被反馈巨丑无比，本次我们将借助陶晶驰串口屏，以1:1复刻苹果手机计算器为目标，不仅实现简单加法运算，更深入理解按键控件的切图在提升界面美观度与交互性方面的应用。通过这个过程，将学会如何利用陶晶驰串口屏打造出既实用又美观的交互界面。

修改前

修改后

目录

一、准备

 1.苹果计算器界面分析

2.陶晶驰串口屏切图控件作用

3. 图片准备

二、加法计算器实现步骤

1.工程创建

2.创建字库和导入字库

3.导入上面整理的照片

4.拖放控件-数字控件

5.(x)变量

6.按钮

三、测试

1.点击调试

2.采用模拟器在测试

3.硬件测试

---

淘晶驰串口屏系列文章：

001：串口屏介绍

002：淘晶驰USART HMI 上位机软件安装

003：淘晶驰串口屏开发初体验：10分钟实现简易加法器

一、准备

 1.苹果计算器界面分析

苹果计算器界面简洁直观，布局规整。其按键设计风格统一，数字与运算符按钮排列有序，显示区域清晰明了。我们的复刻完全沿用其外观布局，包括按钮的大小、位置、颜色以及字体风格等，同时运用切图控件来呈现类似的视觉效果，直接手机截屏使用。

2.陶晶驰串口屏切图控件作用

切图控件在陶晶驰串口屏中用于展示图片资源，作用是将全屏图片的一部分抠出来显示，它能够加载预先准备好的图片，这些图片可以是按钮、图标、背景等元素，为界面增添丰富的视觉效果。对于按键来说，不按下时候默认的状态，按下时候颜色变浅色，起到按键被按下的效果。

sta属性 -背景填充方式:0-切图;1-单色;2-图片;3-透明（仅x系列支持透明）。可读，可通过上位机修改，不可通过指令修改。

picc属性 -按钮没按下时切图背景(必须是全屏图片)，sta为切图时才有这个属性。可读，可通过上位机修改，可通过指令修改。

picc2属性 -按钮按下时切图背景(必须是全屏图片)，sta为切图时才有这个属性。 可读，可通过上位机修改，可通过指令修改。

3. 图片准备

根据设计需求，准备好符合尺寸和格式要求的图片。一般来说，需注意图片分辨率与串口屏分辨率适配，以保证显示效果清晰。本例程的是淘晶驰x5，分辨率是800*480。直接插入苹果手机的截图会提出如下提示“分辨率超出最大范围”。

可以在Windows自带的画图软件进行剪裁，比如

剪裁后的照片是369*800

把所有用到的照片整理好，照片包括，无按键按下，单一按键按下的截图。

如图所示。

可以到资源下载原文件,点击链接

二、加法计算器实现步骤

工程最终效果

1.工程创建

1).点击新建按钮

---

2).选择保存工程的位置，并为工程设置文件名，点击保存

---

3).选择串口屏型号，您可以在串口屏的背面看到屏幕的型号，这里以TJC8048X570_011来演示

---

4).点击左侧的显示选项，选择一个显示方向，并点击OK，完成工程的创建

5).默认创建了page0页面

2.创建字库和导入字库

要先导入字库控件才可以正常显示文字

1).点击工具-字库制作

---

2).设置如下

---

3).点击生成字库，将字库保存到素材-字库中

4).生成完毕，显示字库占用空间，点击确定

---

5).询问是否加入字库，点击“是”

---

6).继续制作112字高的字库，用于存放运算结果。

---

3.导入上面整理的照片

可以使用一张整体背景图片作为切图控件，覆盖整个屏幕区域，以模拟苹果计算器的整体背景风格。通过调整切图控件的透明度等属性，使界面看起来更加协调。

4.拖放控件-数字控件

用于存放输入数字和运算结果.字体font设置成1.

5.(x)变量

变量控件是存储临时数据的核心组件，类似于编程中的i、j等中间变量,这里是va0。

6.按钮

sta属性 -背景填充方式: 按钮的sta设置成切图。为picc和picc2属性选择对应的照片。 picc属性 -按钮没按下时切图背景(必须是全屏图片)，picc2属性 -按钮按下时切图背景(必须是全屏图片)。

b1（按钮）为例，sta设置成切图，picc设置为编号是0的照片，picc2设置为编号是1的照片。

在按钮b1的弹起事件输入代码:n0.val=1

类似地,sta、picc、picc2属性一样的设置。

在按钮b2的弹起事件输入代码:n0.val=2
在按钮b3的弹起事件输入代码:n0.val=3
在按钮b9的弹起事件输入代码:n0.val=9

加法运算逻辑：当用户点击“+”按钮时，主控设备记录下该运算符，并等待下一个数字输入。当点击“=”按钮时，主控设备根据之前记录的数字和运算符进行加法运算，并将结果显示在屏幕的显示区域。

在按钮b13的弹起事件输入代码:va0.val=n0.val
在按钮b14的弹起事件输入代码:n0.val=n0.val+va0.val

三、测试

1.点击调试

不会报错，可以正常运行。

2.采用模拟器在测试

按下1+2=,可以得到结果3.按下2+1=,可以得到结果3.恭喜你已经成功了.

如果你有淘晶驰的串口屏在手，可以烧录到硬件测试。

3.硬件测试

 淘晶驰的串口屏x5触摸屏烧录到硬件后的测试效果。

至此，您已成功用淘晶驰串口屏完成了一个具备加法运算功能的计算器，不仅熟悉了工程创建、字库导入、控件拖放等全流程操作，更掌握了变量存储、事件逻辑，切图等核心开发思维。这些技能不仅适用于简单计算器，更能延伸至智能家居控制面板、工业仪表监测界面、智能设备调试终端等丰富场景。

不妨尝试修改计算器代码实现减法、乘法功能，或添加图像控件让界面更美观。遇到问题时，可随时参考文末的官方教程文献。

下期预告： 陶晶驰串口屏：复刻苹果计算器，掌握切图控件的使用。关注我，解锁更多实战技巧！

参考文献：淘晶驰官方教程