案例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预览效果如下: