EUI RadioButton,RadioButtonGroup實現多選項按鈕


 

官網單選框教程:http://developer.egret.com/cn/github/egret-docs/extension/EUI/controls/radioButton/index.html

 

這里和官網教程不一樣,官網是在代碼里設置RadioButtonGroup,以及RadioButton的value值。

這里是在exml中源碼里設置。

 

一 自動創建的RadioButtonGroup

RadioButtonGroup不能在exml里拖動創建,也不能在exml源碼里創建。因為wing沒提供...

一個exml上擺放的多個RadioButton,未指定groupName情況下,會為他們自動創建一個唯一RadioButtonGroup。

 

 

若需要手動為這些RaidoButton分組,則需要在exml源碼里設置groupName屬性。

下面代碼為兩個RadioButton分別指定groupName為“a”和“b”,相當於創建了兩個RadioButtonGroup。

<e:RadioButton id="rd1" label="單選框" x="71" y="117" value="1" groupName="a"/>
<e:RadioButton id="rd2" label="單選框" x="70" y="174" value="2" groupName="b"/>

 

二 監聽單選事件

因為exml上沒有RadioButtonGroup,所以只能監聽任意一個RadioButton,調用RadioButton.group值來獲取RadioButtonGroup。

private rd1:eui.RadioButton; public childrenCreated(){ this.rd1.group.addEventListener(egret.Event.CHANGE, this.onChange, this); } private onChange(e:egret.Event){ var rbGroup:eui.RadioButtonGroup = e.target; console.log(rbGroup.selectedValue); //點擊的RadioButton對象的value值 console.log(rbGroup.selection); //點擊的RadioButton對象 }

 

RadioButton的value值需要在exml源碼里設置。

若沒有手動設置value值,則會自動將label值作為value值。

下面代碼為兩個RadioButton設置value值為“1”和“2”。

<e:RadioButton id="rd1" label="單選框" x="71" y="117" value="1"/>
<e:RadioButton id="rd2" label="單選框" x="70" y="174" value="2"/>

 

三 設置RadioButton皮膚

可直接在快捷面板中設置正常、按下等皮膚

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM