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

1. radioButton1 Loacation： X：56 Y: 25
   
2. radioButton2 Loacation： X：56 Y: 78
   
3. radioButton3 Loacation： X：56 Y: 129
   
4. radioButton4 Loacation： X：56 Y: 179
   
5. selectedText Loacation：    X：114 Y: 137
   
6. deselectedTextLoacation： X：114 Y: 189
   
7. 同时分别设置四个radioButton的背景图片如下所示：
   
8. radioButton可以在SELECTION栏里设置默认启动时是否选择此radioButton。

复制代码

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



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




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

1. //radioButton1的selected时执行的C++代码
   
2. Unicode::snprintf(selectedTextBuffer, 4, "%d", 1);
   
3. selectedText.resizeToCurrentText();
   
4. selectedText.invalidate();

复制代码

1. //radioButton2的selected时执行的C++代码
   
2. Unicode::snprintf(selectedTextBuffer, 4, "%d", 2);
   
3. selectedText.resizeToCurrentText();
   
4. selectedText.invalidate();

复制代码

1. //radioButton3的selected时执行的C++代码
   
2. Unicode::snprintf(selectedTextBuffer, 4, "%d", 3);
   
3. selectedText.resizeToCurrentText();
   
4. selectedText.invalidate();

复制代码

1. //radioButton4的selected时执行的C++代码
   
2. Unicode::snprintf(selectedTextBuffer, 4, "%d", 4);
   
3. selectedText.resizeToCurrentText();
   
4. selectedText.invalidate();

复制代码

1. //radioButton1的deselected时执行的C++代码
   
2. Unicode::snprintf(deselectedTextBuffer, 4, "%d", 1);
   
3. deselectedText.resizeToCurrentText();
   
4. deselectedText.invalidate();

复制代码

1. //radioButton2的deselected时执行的C++代码
   
2. Unicode::snprintf(deselectedTextBuffer, 4, "%d", 2);
   
3. deselectedText.resizeToCurrentText();
   
4. deselectedText.invalidate();

复制代码

1. //radioButton3的deselected时执行的C++代码
   
2. Unicode::snprintf(deselectedTextBuffer, 4, "%d", 3);
   
3. deselectedText.resizeToCurrentText();
   
4. deselectedText.invalidate();

复制代码

1. //radioButton4的deselected时执行的C++代码
   
2. Unicode::snprintf(deselectedTextBuffer, 4, "%d", 4);
   
3. deselectedText.resizeToCurrentText();
   
4. deselectedText.invalidate();

复制代码

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