有了前两篇的基础，这次实现车速动态显示。
' Q3 W1 n4 `$ Q- GUI使用了两个控件，一个是Text Area,一个是circleProgress。UI 效果如图1所示：

图1
这里要想实现Text Area的动态效果，需要使用属性中的Wildcard1 ,才能实现预想的数字动态变化的效果。
7 U0 r' A  l- m: a3 [1 e/ D而Wildcard1 的配置如图2所示：
. t; Q6 Z0 f7 h. L
8 }+ B+ K1 N6 X! E% {图2
; I  o  M6 Z# a5 f
! z) \. I8 }' l* T
当然还需要配置一下左边的Texts, 在Wildcard Ranges 中输入0-9数字，配置如图3所示：
7 R" m, m% b/ q, y
8 M6 h; y$ p1 V" ]图3
2 s4 o- k8 Z( f7 E1 X剩下的就是在程序中让Text Area 和 circle Progress 控件绑定。程序实现如下：

1. if (directionUp)
   
2.     {
   
3.         if (counter < 140)
   
4.             counter++;
   
5.         else
   : {' `  e8 p0 S9 m1 @5 W
6.             directionUp = false; // 到 140 开始下降
   
7.     }
   / H9 D  y5 N5 U& O  X
8.     else
   
9.     {
   
10.         if (counter > 0)
    
11.             counter--;
    : F- l8 [) [; b8 i: a
12.         else
    & b, X. @5 Q% _
13.             directionUp = true;  // 到 0 开始上升
    ! o+ r5 k8 g, f; X0 b0 a0 R: @
14.     }
    2 v% {5 g; {% l2 J; l9 p
15.    Unicode::snprintf(textArea1Buffer, TEXTAREA1_SIZE, "%d", counter);
    
16.     textArea1.invalidate();
    
17. 
    6 Y4 n) M& a4 O+ U/ m
18.     circleProgress1.setValue(counter);
    " |; Q3 t$ I$ y  |' \
19.     circleProgress1.invalidate();

复制代码

我们要实现的功能是车速从0-140km/h变化，百米加速。同时circeProgress 控件实现相应的同步。变化循环往复，相当于开机自检。最终效果如图4所示：
( U( C& d& U& T  |; T
  m# s( ^4 w; `图4
( v1 q# E# n/ P$ ]* x: N: r
+ {2 p$ y4 Z: }, c9 b- n5 z8 u6 f

效果可以，就是UI界面再酷一点就好了

STMCU-管管 发表于 2025-12-8 17:12
效果可以，就是UI界面再酷一点就好了

还没更新完，搞明白了原理，发现还挺好玩的。