Cocos 3.x 菜鸟一起玩：UI的交互

Cocos 3.x 菜鸟一起玩：Hello World

1 常用的登录组件构成

UI里面登录是常用的功能，接下来实验一下登录功能。登录功能提供账号进入途径。那样，看看登录UI需要哪些元素构建？登录界面里面需要2个编辑文本的组件和一个登录按钮。这2个编辑文本的组件叫EditBox。EditBox用来编辑文本，一个用来做账号，一个用来做密码。这三个组件就能实现一个比较基础的登录界面。

经过上述调整，UI界面改成了如下方式。

2 控制交互功能

UI在上述界面操作进行一个很基础的布局，添加交互需要将对应节点名字进行修改。调整合适的名字有助于我们编写逻辑进行维护。接下来编写交互代码，对节点进行监听。新建一个脚本名为LoginPanel，然后挂载Canvas下。

import { _decorator, Component, EditBox, Button, Input } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('LoginPanel')
export class LoginPanel extends Component {
   
    private nameInput:EditBox;

    private passInput:EditBox;

    private loginBtn:Button;

    start() {

         this.nameInput = this.node.getChildByName("nameInput").getComponent("cc.EditBox") as EditBox;
         this.passInput = this.node.getChildByName("passInput").getComponent("cc.EditBox") as EditBox;
         this.passInput.inputFlag = EditBox.InputFlag.PASSWORD;
         this.loginBtn = this.node.getChildByName("loginBtn").getComponent("cc.Button") as Button;
         this.loginBtn.node.on(Input.EventType.TOUCH_START,this.onLogin,this);
    }

    private onLogin(){
        if( this.nameInput.string == "cocos" && this.passInput.string == "123456"){
            console.log("登录过了");
        }
    }
   
}

注意一点，使用按钮监听Touch事件的时候，systemEvent已经在新版标记过时，改成Input处理。由于迭代过程，cocos在新版的构思中除了兼容老的版本，还会在新版引入新的机制来逐步完善API。可能会造成版本差异，这一点也是在接触引擎的一些使用代价。

3 小结

在登录过程，还会引入手机验证码机制。这个机制会和服务器进行交互验证。在密码显示方式，Cocos 编辑器提供了Input Flag的选项。这样密码就可以显示为不可见的方式。而不是明文方式展示。