1 N; R! g  H# L/ C* g0 y/ G. f有了前两篇的基础，这次实现车速动态显示。
UI使用了两个控件，一个是Text Area,一个是circleProgress。UI 效果如图1所示：
% n( d, E. Q, \8 t
图1
7 p: n" I/ z1 j这里要想实现Text Area的动态效果，需要使用属性中的Wildcard1 ,才能实现预想的数字动态变化的效果。
; |" N. X& X$ a, O& {/ C而Wildcard1 的配置如图2所示：
% c! q" ?' i, Q, p1 p0 X, z/ K+ ~) D8 z
图2


+ B6 w4 W9 m& F; c4 J5 r当然还需要配置一下左边的Texts, 在Wildcard Ranges 中输入0-9数字，配置如图3所示：
+ N1 u  P* c/ w
图3
2 e  v7 ^; ?0 }$ L  [& A剩下的就是在程序中让Text Area 和 circle Progress 控件绑定。程序实现如下：
  {2 M! Z' j+ F

1. if (directionUp)
   
2.     {
   
3.         if (counter < 140)
   / Q4 _# [& p7 g; W5 u# b( Z
4.             counter++;
   2 z2 n& H$ W- Z0 h- J
5.         else
   
6.             directionUp = false; // 到 140 开始下降
   
7.     }
   ! }& M: a( x. A! v1 c
8.     else
   / Y4 j: x3 [- y+ j9 J
9.     {
   1 ^: m( v- e6 G  @
10.         if (counter > 0)
    
11.             counter--;
    
12.         else
    - P$ j2 ?% _0 p* A2 T
13.             directionUp = true;  // 到 0 开始上升
    7 M! L0 M  t1 P/ y3 p* i9 `
14.     }
    
15.    Unicode::snprintf(textArea1Buffer, TEXTAREA1_SIZE, "%d", counter);
    
16.     textArea1.invalidate();
    * k  ^6 K# ~; h8 x
17. 
    
18.     circleProgress1.setValue(counter);
    
19.     circleProgress1.invalidate();

复制代码

$ X7 ^, T# E( p我们要实现的功能是车速从0-140km/h变化，百米加速。同时circeProgress 控件实现相应的同步。变化循环往复，相当于开机自检。最终效果如图4所示：
' S0 I8 j* f* x1 O
图4

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

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

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