ArkUI事件

1. onChange(() { })这是一个通用的状态变化监听回调函数常用于表单类组件。应用场景当组件的内部状态发生改变时触发。典型例子TextInput当输入框内的文字发生变化时调用。Toggle / Checkbox当开关状态切换 开/关时调用。2. onClick(() { })这是最基础也是最常用的点击事件监听回调。应用场景几乎所有可交互组件Button, Image, Text, Row 等都支持。作用当用户点击该组件时执行花括号 { } 内的逻辑代码。典型例子点击按钮提交数据、点击图片放大预览、点击列表项跳转详情等。示例这段代码是使用 HarmonyOS ArkUI 框架声明式 UI编写的登录页面。它的主要功能是提供账号和密码的输入界面并在点击登录按钮时进行简单的校验和页面跳转。import router from ohos.router;//导入路由引入了 HarmonyOS 的 router 模块用于实现页面之间的跳转。 Entry Component struct LoginRouter {State username:string State password:string//State这是 ArkUI 的核心装饰器用于管理组件的内部状态。当这两个变量的值发生改变时UI 界面会自动刷新。这里定义了两个字符串变量分别用来双向绑定账号和密码输入框的内容。build() { Column({ space: 20 }) { Text(登 录) .fontSize(32) .fontWeight(FontWeight.Bolder) TextInput({text:this.username, placeholder: 请输入账号 }) .width(100%) .height(52).onChange((valus:string){ //onChange监听输入内容的变化。当用户输入时回调函数会被触发并将最新的值赋给 this.username从而更新状态。this.usernamevalus }) TextInput({ text:this.password,placeholder: 请输入密码 }) .width(100%) .height(52) .type(InputType.Password) .onChange((value:string){ this.passwordvalue }) Button(登录) .width(100%) .height(52) .fontSize(22).onClick(() { ///onClick点击事件处理。条件判断 (if)检查账号和密码是否都不为空。跳转成功 (router.pushUrl)如果校验通过使用路由将页面跳转到 pages/HomePages同时通过 params 把账号和密码传递到下一个页面。校验失败 (else)如果有任何一项为空会弹出一个系统对话框 (AlertDialog)提示“用户名或密码不能为空”。 if(this.username! this.password!){ router.pushUrl({ url: pages/HomePages, params:{ username:this.username, password:this.password} }) } else{ AlertDialog.show({ title:登录失败, message:用户名或密码不能为空 }) } }) } .width(100%) .height(100%) .padding(15) } }import router from ohos.router; Entry Component struct HomePages{ State name:string onPageShow(): void { const paramsrouter.getParams()as Recordstring,string if(params){ this.nameparams.username } } build() { Column(){ Text(欢迎你${this.name}) } } }