Ⓔeui.RadioButton & eui.RadioButtonGroup 用法

單選按鈕

MainUISkin.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="edwin.MainUISkin" xmlns:e="http://ns.egret.com/eui" xmlns:edwin="edwin.*">
    <e:Rect fillColor="0x000000" width="100%" height="100%" />
    <e:Group horizontalCenter="0" verticalCenter="0">
        <e:Group>
            <!-- groupName 用以分組, group 用以綁定事件 -->
            <e:RadioButton label="台北" value="台北" groupName="g1" group="{rbg_g1}" />
            <e:RadioButton label="台中" value="台中" groupName="g1" group="{rbg_g1}" />
            <e:RadioButton label="高雄" value="高雄" groupName="g1" group="{rbg_g1}" />
            <e:RadioButton label="男" value="1" groupName="g2" />
            <e:RadioButton label="女" value="0" groupName="g2" />
            <e:layout>
                <e:HorizontalLayout gap="10" />
            </e:layout>
        </e:Group>
        <e:layout>
            <e:VerticalLayout />
        </e:layout>
    </e:Group>
</e:Skin>

MainUI.ts

namespace edwin {

    export class MainUI extends eui.Component {

        private rbg_g1: eui.RadioButtonGroup = new eui.RadioButtonGroup();

        protected createChildren(): void {
            super.createChildren();
            this.percentWidth = this.percentHeight = 100;
            this.rbg_g1.addEventListener(eui.UIEvent.CHANGE, e => console.log(e.target.selectedValue), this);
        }

    }

}