实战案例1：实现单选按钮及在文本框中展示选中的按钮内容

案例1：实现单选按钮，并将单选按钮内容填充至文本框

（1）元件准备：三个单选按钮，一个button按钮，一个文本框

（2）分析：a.单选按钮的实现；

                     b.将选中按钮的内容填充至文本框；

                     c.在下一个选中按钮的行为产生之前，对应的单选按钮还是处于选中的状态。

---

操作步骤：

1.首先在左下角的图形库里选择三个单选按钮（以三个按钮为例），并分别对三个按钮命名，命名方式是选中要命名的按钮，在属性上面的空白框里输入命名，操作如下所示：

 2.选中按钮操作的实现：由于该页面存在三个按钮，要实现单选的效果，必须要使这几个按钮产生互斥，那么这时候我们需要利用交互中的添加用例，当我们选中其中一个按钮时（选中状态为true），其他两个按钮的选中状态就应该为false，这里我们以“man”这个单选按钮为例，即将man按钮的选中状态设置为true，同时其他两个按钮设置为false即可，具体操作如下所示：

由于woman及baomi按钮选中互斥的操作与man按钮操作类似，这里不多说。完成了单选按钮的设置，那么问题来了，我们要如何将选中按钮的内容可以显示在对应的文本框呢？与此同时，当内容显示在文本框时，对应的单选按钮还是处于选中的状态（在点击下一个按钮之前）？

3.将选中的单选按钮内容显示在对应的文本框中：首先需要在工作区域拖入一个文本框，为了后续便于区分，这里我们将文本框命名为“展示选中内容”，再添加一个button按钮来触发交互行为，以下所有设置都是在该按钮上设置的。

a.选中按钮的设置：选中按钮，选择交互行为中的添加用例，在弹出的用例编辑页面双击case1，弹出条件设立弹框，设置对应的状态，以man按钮为例，具体操作如下所示：

 b.选择“设置文本”，双击中间模块的内容，右边会对应弹出配置动作相应的图形，勾选要显示内容的文本框，在右下角填入文本框中要显示的内容“男”，点击确定，预览就可以发现文本框中会显示选中按钮的内容，具体操作如下所示：

c.在内容显示在文本框时，选择下一个选中按钮之前，对应的单选按钮还是处于选中的状态的设置，具体操作如下所示：

三个按钮设置完成之后如下图所示：

 4.按F5预览效果如下：

---

---