【前言】

在设计初期，我手工绘制了box与TexArea标签来显示健康监测的“舒张压、收缩压、心率”等状态，为了按比例的显示box高度，并让数据动态显示在box的上方，通过计算，现在可以动态的实时更新了。本篇将详细的介绍如何实现匹配的。

【box高度匹配】

1、通过在TouchGFX Desiger中查看，box的最高高度值为70显示最合理。因此，所有的box的高度最大值为70，进行了宏定义为70的高度。

2、同时根据各个值的最高限度，也将其做了最高限植的定义，最后定义如下：

3、box的高度计算。

用草稿纸画了一下示意图，并列出了计算公式：

因此以心率为例编写代码如下：

void CustomContainerMKS::setvalHEARTText(int16_t val)
{
    int16_t thisHeight = boxHEART.getHeight();
    int16_t thisy = boxHEART.getY();
    int16_t height = (val*MAXHEIGHT)/MAXHEART;
    thisy = thisy + (thisHeight-height);
    boxHEART.setY(thisy);
    boxHEART.setHeight(height);
    boxHEART.invalidate();
    Unicode::snprintf(valHEARTBuffer, 10, "%d", val);
    valHEART.setY(thisy-18);
    valHEART.invalidate();
}

同时显示数值的TextArea 将他的Y坐标设置为Box的Y坐标向上偏移18，就可以完美的适配了。

最后设置初始值效果如下：

【设置心得】

通过学习TouchGFX的API函数，就可以了解它们控制的详细用法。从而可以完美的实现GUI的动态设置。

楼主真细啊，要是界面做的跟官方Demo那么漂亮丝滑就更好了

h12121 发表于 2025-10-28 10:12
楼主真细啊，要是界面做的跟官方Demo那么漂亮丝滑就更好了

那个要美工来设计图片，我目前没有这样的资源呀。

lugl 发表于 2025-10-28 11:46
那个要美工来设计图片，我目前没有这样的资源呀。

现在制图网站蛮多的，模块选选就有

h12121 发表于 2025-10-28 13:51
现在制图网站蛮多的，模块选选就有

大佬你出个教程呗