鸿蒙开发三项知识点简述

📅 2026/6/30 16:51:07 👁️ 次浏览

一、State这是 ArkUI 基础状态装饰器用于给组件内变量赋予响应式特性。变量数值发生变更时绑定该变量的界面会自动刷新 UI状态仅在当前自定义组件内生效弹窗显示开关、输入内容、按钮选中状态这类本地交互逻辑一般都用它来控制。import router from ohos.router;EntryComponentstruct Logins{State username:string //定义用户名State password:string //定义密码build() {Column({space:20}){Text(用户登录).fontSize(32).fontWeight(FontWeight.Bolder).margin({ top: 20, bottom: 30 })TextInput({text:this.username, placeholder: 请输入账号: }).width(320).height(52).borderRadius(12).fontSize(16).onChange((value: string) {this.username value})TextInput({text:this.password, placeholder: 请输入密码: }).type(InputType.Password).width(320).height(52).borderRadius(12).fontSize(16).onChange((value:string){this.password value})Text(没有账号立即注册).fontSize(20).fontColor(0x1677ff).onClick((){router.pushUrl({url:pages/Register //页面路由 url:pages/下一页的文件名})})Row({space:20}) {Button(立即登录).width(150).height(52).backgroundColor(0x007Dff).fontSize(18).borderRadius(12).margin({ bottom: 80 }) //距离父容器下边缘向上留出 80 像素的距离。.onClick(() {if (this.username root this.password root) {AlertDialog.show({title: 登录成功,message: 欢迎你${this.username}})}else {AlertDialog.show({title: 登录失败,message: 用户名或者密码错误 //弹窗})}})}}.width(100%).height(100%)}}二、弹窗属于悬浮于页面上层的交互组件用来做提示确认、表单录入、选项选择等场景。常用实现CustomDialog 自定义弹窗、系统简易提示框 promptAction、底部弹出面板 bindSheet也可通过路由配置弹窗页面弹窗的显示隐藏大多依靠 State 变量控制。文件main_pages.json{src: [pages/Index,pages/Second,pages/Logins, //第一个文件的名字pages/Register, //第二个文件的名字pages/RouterDemo,pages/PageOne,pages/diyiye,pages/dierye,pages/LoginRouter,pages/HomePage]}三、路由负责应用多页面跳转、参数传递、页面回退是多页面应用核心能力。原生 router 模块pushUrl 打开新页面、back 返回上一页跳转时可携带页面参数Navigation 导航容器自带导航栏与切换动画适配折叠屏、分栏等复杂布局。import router from ohos.router;EntryComponentstruct Register{build() {Column({space:20}){Text(用户注册).fontSize(30).fontWeight(FontWeight.Bolder).margin({top:20,bottom:30})TextInput({placeholder:请输入手机号}).width(320).height(52).borderRadius(12).fontSize(16)TextInput({placeholder:请输入密码}).type(InputType.Password).width(320).height(52).borderRadius(12).fontSize(16)TextInput({placeholder:请再输入密码}).type(InputType.Password).width(320).height(52).borderRadius(12).fontSize(16)Text(已有账号立即登录).fontSize(20).fontColor(0x1677ff).onClick((){router.back({url:pages/Logins //第一个文件的名字})})Button(注册).width(150).height(52).fontSize(16)}.width(100%).height(100%)}}三者关系State 管控局部界面状态弹窗是临时悬浮交互窗口路由用于完整页面间跳转开发中三者经常搭配使用。

相关新闻