Cocos 3.x：初学者的UI 交互Cocos 3.x：初学者的Hello World
1 常用的登录组件构成了UI。 接下来，让我们尝试一下登录功能。登录功能提供了一种进入您的帐户的方式。让我们看看构建登录UI 需要哪些元素。登录界面需要两个用于文本编辑的组件和一个登录按钮。这两个用于编辑文本的组件称为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; this.nameInput;=this.node.getChildByName(\’nameInput\’).getComponent(\’cc.EditBox\’) as EditBox; this.passInput=this.node.getChildByName(\’passInput\’).getComponent(\’cc.EditBox\’) as EditBox;passInput.inputFlag=EditBox.InputFlag.PASSWORD; this.loginBtn=this.node.getChildByName(\’loginBtn\’).getComponent(\’cc.Button\’) as Button; } private onLogin(){ if( this.nameInput.string==\’cocos\’ this.passInput.string==\’123456\’){ console.log(\’已登录\’);
登录界面
打印输出日志
使用按钮监听Touch 事件时，请注意systemEvent 在新版本中已弃用，并替换为输入处理。通过迭代的过程，新版本的cocos不仅兼容旧版本，而且随着时间的推移，新版本引入了新的机制并改进了API。可能存在版本差异，这会牺牲一些引擎使用率。
对比度差异
3 小结在登录过程中，还引入了手机验证码机制。该机制与服务器交互以进行验证。在密码显示模式下，Cocos 编辑器提供了Input flags 选项。这样您就可以隐形地显示您的密码。而不是将其显示为纯文本。
密码方式
本文和图片来自网络，不代表火豚游戏立场，如若侵权请联系我们删除：https://www.huotun.com/game/642406.html