【经验分享】stm32基于TouchGFX的GUI开发（三）：radioButton 控件的使用

STMCU小助手 · 2022-03-09T03:17:57+00:00

一、创建控件 " M6 |. o1 p4 g/ R# E/ P1 P) ]1、创建4个radioButton，和两个text Area控件。6 A2 C5 d1 a7 l0 j q! J3 Y ?0 z3 x 2 w) I& W1 d8 E. Q1 ]1 @ ! ]/ y& X4 A2 L0 RradioButton1 Loacation： X：56 Y: 25 Q3 P, a, _" J" }2 r$ E radioButton2 Loacation： X：56 Y: 78 6 L7 D5 g0 P6 ?3 cradioButton3 Loacation： X：56 Y: 129, M$ n* H! P, J' ^ radioButton4 Loacation： X：56 Y: 179& z$ e! u9 Z# v& P% b* d4 [ selectedText Loacation： X：114 Y: 137* Y: [" R5 I6 s8 Q deselectedTextLoacation： X：114 Y: 189 4 X) M/ v9 c- e) C+ A同时分别设置四个radioButton的背景图片如下所示：" o/ h5 K( J- Y# M$ ? radioButton可以在SELECTION栏里设置默认启动时是否选择此radioButton。复制代码6 U0 n1 f# Z: l3 G1 S' m ; O. b6 u/ C; C3 ?; U& K9 h 3 n: r4 {' Y6 F$ D4 b7 Z 然后按照下图给Text Area添加文本资源$ F2 w7 n5 y4 j" ]" f6 p- Z . h7 v: Q: j/ ^ - O! q+ [& R R/ m/ S" D 1 x% O* A( n! b& k2 }二、实现交互5 C& k. w3 Q E+ e/ F* w0 j 一共添加8个InterAction，每个radioButton添加一个selected和deselected的InterAction。 % H( J2 k5 K0 U" V. i8 U2 t7 w7 u) V0 ~# ?; _& V & u: F! ^$ M* l. t# Y6 m5 ~. P: L ; A* }& W3 J2 h; w/ I/ K# _% r * z3 |/ X0 G9 ], V6 B0 w依次向8个interactions的code里面添加如下C++代码% ~; [, L- Q8 a/ Z8 N$ n* B 5 y# B$ A+ K9 q% ?# k //radioButton1的selected时执行的C++代码$ z$ o& Q3 ~2 O$ g5 M( I7 X Unicode::snprintf(selectedTextBuffer, 4, "%d", 1);* @, t3 D- g4 E) ] selectedText.resizeToCurrentText(); / q- ]/ r+ V6 d: f+ JselectedText.invalidate();复制代码//radioButton2的selected时执行的C++代码! W' ?, v7 E* f: I3 e( {1 N \ Unicode::snprintf(selectedTextBuffer, 4, "%d", 2);5 T. e4 k8 i% i- G selectedText.resizeToCurrentText(); # @( c7 y$ k$ P: {! e5 t- [selectedText.invalidate();复制代码//radioButton3的selected时执行的C++代码6 i/ p. C, v% U% ] Unicode::snprintf(selectedTextBuffer, 4, "%d", 3); 9 I) \! \" @5 {7 e+ E, vselectedText.resizeToCurrentText();1 j h/ e5 N- \! s5 [6 V+ c9 J; v selectedText.invalidate();复制代码//radioButton4的selected时执行的C++代码- L# B; l& p) y/ b/ K: ~ Unicode::snprintf(selectedTextBuffer, 4, "%d", 4); 1 y6 Z* n0 G5 j* u; a0 cselectedText.resizeToCurrentText();. o0 j+ [! e" v I5 j* }$ I selectedText.invalidate();复制代码//radioButton1的deselected时执行的C++代码0 C- D! N2 M& c3 B# o Unicode::snprintf(deselectedTextBuffer, 4, "%d", 1); 4 V& [0 I! x; u: w. XdeselectedText.resizeToCurrentText(); / t$ A" S% P' h1 O- q0 |2 hdeselectedText.invalidate();复制代码//radioButton2的deselected时执行的C++代码9 ^ d, A; P1 _% E' i$ P Unicode::snprintf(deselectedTextBuffer, 4, "%d", 2); & E* q7 ?9 s: y" kdeselectedText.resizeToCurrentText();1 c: p C1 _! r deselectedText.invalidate();复制代码//radioButton3的deselected时执行的C++代码 ! k: W( S G. S1 J4 r5 kUnicode::snprintf(deselectedTextBuffer, 4, "%d", 3); 0 G" [& Z) ~- Z! mdeselectedText.resizeToCurrentText();9 D( t4 D/ }6 U. p4 u deselectedText.invalidate();复制代码//radioButton4的deselected时执行的C++代码 / G$ p4 {- m! @. D8 V8 dUnicode::snprintf(deselectedTextBuffer, 4, "%d", 4);, m2 y& E- w. b& e) V5 l) G/ ~ deselectedText.resizeToCurrentText();# T0 W/ B. r$ |& }7 F deselectedText.invalidate();复制代码 & d1 ]: g& ^$ x* e& H XRunsimulation即可看到最终演示结果和我们预期相同。 9 N0 |! y# e) [( x5 N# b$ \. r2 D: s 9 C6 L* Y" n: S! o 7 Q& w9 F; _$ q- r8 d: r ! f" |/ h4 l6 V) V

【经验分享】stm32基于TouchGFX的GUI开发（三）：radioButton 控件的使用

[复制链接]

STMCU小助手发布时间：2022-3-9 11:17

技术帖
文章封面:
文章简介:	stm32基于TouchGFX的GUI开发（三）：radioButton 控件的使用

一、创建控件
1、创建4个radioButton，和两个text Area控件。

$8V7QD}5(L43LKK~0R_IS{]V.png$

radioButton1 Loacation： X：56 Y: 25 Q3 P, a, _" J" }2 r$ E
radioButton2 Loacation： X：56 Y: 78
6 L7 D5 g0 P6 ?3 c
radioButton3 Loacation： X：56 Y: 129, M$ n* H! P, J' ^
radioButton4 Loacation： X：56 Y: 179& z$ e! u9 Z# v& P% b* d4 [
selectedText Loacation： X：114 Y: 137* Y: [" R5 I6 s8 Q
deselectedTextLoacation： X：114 Y: 189
4 X) M/ v9 c- e) C+ A
同时分别设置四个radioButton的背景图片如下所示：" o/ h5 K( J- Y# M$ ?
radioButton可以在SELECTION栏里设置默认启动时是否选择此radioButton。

复制代码

然后按照下图给Text Area添加文本资源

{)~02V@S3PRKN{H`KSN{L`6.png

二、实现交互
一共添加8个InterAction，每个radioButton添加一个selected和deselected的InterAction。

EV`P4A}DTZNEY`QA5T60[E0.png

依次向8个interactions的code里面添加如下C++代码

//radioButton1的selected时执行的C++代码$ z$ o& Q3 ~2 O$ g5 M( I7 X
Unicode::snprintf(selectedTextBuffer, 4, "%d", 1);* @, t3 D- g4 E) ]
selectedText.resizeToCurrentText();
/ q- ]/ r+ V6 d: f+ J
selectedText.invalidate();

复制代码

//radioButton2的selected时执行的C++代码! W' ?, v7 E* f: I3 e( {1 N \
Unicode::snprintf(selectedTextBuffer, 4, "%d", 2);5 T. e4 k8 i% i- G
selectedText.resizeToCurrentText();
# @( c7 y$ k$ P: {! e5 t- [
selectedText.invalidate();

复制代码

//radioButton3的selected时执行的C++代码6 i/ p. C, v% U% ]
Unicode::snprintf(selectedTextBuffer, 4, "%d", 3);
9 I) \! \" @5 {7 e+ E, v
selectedText.resizeToCurrentText();1 j h/ e5 N- \! s5 [6 V+ c9 J; v
selectedText.invalidate();

复制代码

//radioButton4的selected时执行的C++代码- L# B; l& p) y/ b/ K: ~
Unicode::snprintf(selectedTextBuffer, 4, "%d", 4);
1 y6 Z* n0 G5 j* u; a0 c
selectedText.resizeToCurrentText();. o0 j+ [! e" v I5 j* }$ I
selectedText.invalidate();

复制代码

//radioButton1的deselected时执行的C++代码0 C- D! N2 M& c3 B# o
Unicode::snprintf(deselectedTextBuffer, 4, "%d", 1);
4 V& [0 I! x; u: w. X
deselectedText.resizeToCurrentText();
/ t$ A" S% P' h1 O- q0 |2 h
deselectedText.invalidate();

复制代码

//radioButton2的deselected时执行的C++代码9 ^ d, A; P1 _% E' i$ P
Unicode::snprintf(deselectedTextBuffer, 4, "%d", 2);
& E* q7 ?9 s: y" k
deselectedText.resizeToCurrentText();1 c: p C1 _! r
deselectedText.invalidate();

复制代码

//radioButton3的deselected时执行的C++代码
! k: W( S G. S1 J4 r5 k
Unicode::snprintf(deselectedTextBuffer, 4, "%d", 3);
0 G" [& Z) ~- Z! m
deselectedText.resizeToCurrentText();9 D( t4 D/ }6 U. p4 u
deselectedText.invalidate();

复制代码

//radioButton4的deselected时执行的C++代码
/ G$ p4 {- m! @. D8 V8 d
Unicode::snprintf(deselectedTextBuffer, 4, "%d", 4);, m2 y& E- w. b& e) V5 l) G/ ~
deselectedText.resizeToCurrentText();# T0 W/ B. r$ |& }7 F
deselectedText.invalidate();

复制代码

Runsimulation即可看到最终演示结果和我们预期相同。