Ⓔeui.EditableText 用法

文字編輯框

MainUISkin.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="edwin.MainUISkin" xmlns:e="http://ns.egret.com/eui">
    <e:Rect fillColor="0x000000" width="100%" height="100%" />
    <e:Group>
        <!-- 設置 Group 是為了讓 Label 垂直置中 -->
        <e:Group height="100%">
            <e:Label text="請輸入email：" verticalCenter="0" />
        </e:Group>
        <!-- EditableText 元件配置寬高, 要設定 verticalAlign 垂直置中 -->
        <e:EditableText id="et_email" border="true" borderColor="0xFFFFFF" verticalAlign="middle" width="300"
                        height="50" />
        <e:Button id="btn_subscribe" label="訂閱" />
        <!-- 水平排版 -->
        <e:layout>
            <e:HorizontalLayout gap="10" />
        </e:layout>
    </e:Group>
</e:Skin>

MainUI.ts

namespace edwin {

    export class MainUI extends eui.Component {

        private et_email: eui.EditableText;
        private btn_subscribe: eui.Button;

        protected createChildren(): void {
            super.createChildren();
            this.percentWidth = this.percentHeight = 100;

            // 可將 email 資訊傳送至伺服器，使用 egret.HttpRequest 或是 egret.URLRequest
            this.btn_subscribe.addEventListener(egret.TouchEvent.TOUCH_TAP, () => this.et_email.text != '' && console.log(this.et_email.text + " 已訂閱！"), this);
        }

    }

}