输入文本组件(TextInput)

1. LayaAir IDE中使用TextInput

文本输入框是游戏中经常会用到的一个UI组件，任何需要输入的时候可以使用TextInput。TextInput类的API可以参考这里。

1.1 创建TextInput

如图1-1所示，可以在层级窗口中右键进行创建，也可以从小部件窗口中拖拽添加。

（图1-1）

1.2 TextInput属性

（图1-2）

1.3 脚本控制TextInput

在Scene2D的属性设置面板中，增加一个自定义组件脚本。然后，将TextInput拖入到其暴露的属性入口中。下面给出一个示例代码，实现脚本控制TextInput：

const { regClass, property } = Laya;

@regClass()
export class TextInputControl extends Laya.Script {
    //declare owner : Laya.Sprite3D;

    @property( { type : Laya.TextInput } )
    public txtin: Laya.TextInput;

    constructor() {
        super();
    }

    /**
     * 组件被激活后执行，此时所有节点和组件均已创建完毕，此方法只执行一次
     */
    onAwake(): void {
        this.txtin.pos(Laya.stage.width >> 1, Laya.stage.height >> 1); //位置
        this.txtin.size(500, 60); //大小
        this.txtin.pivot(this.txtin.width/2, this.txtin.height/2); //轴心点
        this.txtin.font = "宋体"; //字体
        this.txtin.fontSize = 50; //字体大小
        this.txtin.color = "#ff0000"; //字体颜色
        this.txtin.bold = true; //加粗
        this.txtin.italic = true; //斜体
        this.txtin.underline = true; //下划线
        this.txtin.underlineColor = "#ff0000"; //下划线颜色
        this.txtin.stroke = 5; //描边宽度
        this.txtin.strokeColor = "#000000" ; //描边颜色
        this.txtin.wordWrap = true; //自动换行
        this.txtin.overflow = "scroll"; //文本溢出
        // this.txtin.skin = "atlas/comp/textinput.png"; //皮肤
        this.txtin.bgColor = "#19a4f1"; //背景颜色
        this.txtin.borderColor = "#f6ff03" //边框颜色

        this.txtin.editable = true; //可编辑状态
        // this.txtin.type = "password"; //输入框类型
        // this.txtin.maxChars = 5; //最大字符数
        // this.txtin.restrict = "12345"; //输入限制
        // this.txtin.prompt = "请输入"; //输入提示
        // this.txtin.promptColor = "#a9a9a9"; //提示词颜色
        // this.txtin.multiline = true; //文本域
    }

}

（为了防止效果杂乱，示例代码中的部分代码先注释掉了，开发者可以自行取消注释观察效果）

2. Textinput代码创建

有时，不想让Textinput组件一开始就在舞台上，而是在要用的时候才添加，这就要通过代码来创建了。在Scene2D的属性设置面板中，增加一个自定义组件脚本，示例代码如下：

const { regClass, property } = Laya;

@regClass()
export class UI_Input extends Laya.Script {

    private SPACING: number = 100;
    private Y_OFFSET: number = 50;

    private skins: any[];

    constructor() {
        super();
    }

    /**
     * 组件被激活后执行，此时所有节点和组件均已创建完毕，此方法只执行一次
     */
    onAwake(): void {


        this.skins = ["resources/res/ui/input (1).png", "resources/res/ui/input (2).png", "resources/res/ui/input (3).png", "resources/res/ui/input (4).png"];
        Laya.loader.load(this.skins).then( ()=>{
            this.onLoadComplete();
        } );
    }

    private onLoadComplete(): void {
        for (var i: number = 0; i < this.skins.length; ++i) {
            var input: Laya.TextInput = this.createInput(this.skins[i]);
            input.prompt = 'Type:';
            input.x = (Laya.stage.width - input.width) / 2;
            input.y = i * this.SPACING + this.Y_OFFSET;
        }
    }

    private createInput(skin: string): Laya.TextInput {
        var ti: Laya.TextInput = new Laya.TextInput();

        ti.skin = skin;
        ti.size(300, 50);
        ti.sizeGrid = "0,40,0,40";
        ti.font = "Arial";
        ti.fontSize = 30;
        ti.bold = true;
        ti.color = "#606368";

        this.owner.addChild(ti);

        return ti;
    }
}

（代码中的图片资源来自“引擎API使用示例”项目，开发者可以自行创建下载）

运行结果：

（图2-1）