一、选项卡代码Entry Component struct TabsDemo { State currentIndex: number 0; build() { Tabs({ barPosition: BarPosition.End }) { TabContent() { // 首页内容写在这里 Text(首页内容) }.tabBar(首页) TabContent() { // 推荐内容写在这里 Text(推荐内容) }.tabBar(推荐) TabContent() { // 我的内容写在这里 Text(我的内容) }.tabBar(我的) } .width(100%) .height(100%) } }运行结果代码解析Entry Component struct TabsDemo { State currentIndex: number 0;Entry标记该结构体为独立页面需要在main_pages.json中注册可作为路由页面单独打开。ComponentArkTS 标准自定义组件装饰器所有页面 / 封装组件必须添加。struct TabsDemo页面组件名称遵循大驼峰命名规范。State currentIndex: number 0;State状态装饰器变量改变时页面自动刷新currentIndex记录当前激活标签的下标初始值0默认选中第一个标签「首页」作用可手动控制标签切换、监听标签切换事件。Tabs({ barPosition: BarPosition.End }) { // 三个TabContent子项 } .width(100%) .height(100%)Tabs({ barPosition: BarPosition.End })Tabs 是多标签切换容器barPosition控制标签栏位置BarPosition.End标签栏放在底部底部导航栏效果当前代码效果BarPosition.Start标签栏放在顶部。宽高属性.width(100%)/.height(100%)Tabs 容器铺满整个屏幕。TabContent() { // 首页内容写在这里 Text(首页内容) }.tabBar(首页)TabContent()单个标签对应的内容容器一个标签页对应一个TabContent 大括号内为切换后展示的页面主体内容可以写 Column、Video、List 等任意组件。.tabBar(首页)定义底部标签栏显示的文字参数为字符串 三个 Tab 分别对应文字首页/推荐/我的。三个 Tab 对应下标下标 0TabContent → tabBar (首页)下标 1TabContent → tabBar (推荐)下标 2TabContent → tabBar (我的)etsTabs({ barPosition: BarPosition.End, index: this.currentIndex }) .onChange((index: number) { this.currentIndex index; console.log(当前切换到下标, index); })index: this.currentIndex双向绑定可代码手动修改currentIndex实现自动切页.onChange每次切换标签触发回调获取当前选中下标。二、文本/输入框代码Entry Component struct FormDemo { State username: string ; State password: string ; build() { Column({ space: 15 }) { Text(账号) .fontSize(16) .width(100%) TextInput({ placeholder:请输入账号, text: this.username }) .width(100%) .height(40) .onChange((val) { this.username val; // 输入内容变化同步到状态变量 }) Text(密码) .fontSize(16) .width(100%) TextInput({ placeholder: 请输入密码, text: this.password }) .width(100%) .height(40) .type(InputType.Password) .onChange((val) { this.password val; }) } .padding(15) } }运行结果代码解析Entry Component struct FormDemo { State username: string ; State password: string ; }Entry标识当前结构体为独立页面需要在main_pages.json中注册可单独路由跳转。ComponentArkTS 自定义组件必带装饰器标记这是一个 UI 组件。struct FormDemo页面组件名称遵循大驼峰命名规范。State username: string ;/State password: string ;State响应式状态装饰器变量值改变时绑定该变量的 UI 会自动刷新username存储账号输入框内容初始为空字符串password存储密码输入框内容初始为空字符串。Column({ space: 15 }) { // 账号区域 // 密码区域 } .padding(15)Column({ space: 15 })垂直布局容器内部元素从上至下排列space:15代表子组件之间统一上下间距 15。.padding(15)给整个表单容器四周添加 15px 内边距内容不会紧贴屏幕边缘。Text(账号) .fontSize(16) .width(100%) TextInput({ placeholder:请输入账号, text: this.username }) .width(100%) .height(40) .onChange((val) { this.username val; // 输入内容变化同步到状态变量 })1. Text (账号)作为输入框的文字标签.fontSize(16)文字字号 16.width(100%)文字宽度占满父容器左对齐展示。2. TextInput 账号输入框核心输入组件构造参数placeholder:请输入账号输入框为空时显示的灰色提示文字text: this.username输入框绑定状态变量实现数据单向绑定。链式属性.width(100%)输入框宽度铺满父容器.height(40)输入框固定高度 40.onChange((val){})输入内容变更触发回调val是当前输入框最新文本把值同步给this.username完成双向数据联动。Text(密码) .fontSize(16) .width(100%) TextInput({ placeholder: 请输入密码, text: this.password }) .width(100%) .height(40) .type(InputType.Password) .onChange((val) { this.password val; })逻辑和账号输入框基本一致唯一差异.type(InputType.Password)设置输入框类型为密码模式输入内容自动显示为圆点 / 星号隐藏明文。三、按钮代码Button(登录).width(90%).height(45).fontSize(16).backgroundColor(#007dff).borderRadius(8).onClick(() {console.log(用户点击了登录按钮);})代码解析1. 基础组件声明Button(登录)功能创建一个按钮组件括号内字符串是按钮显示文字页面上会展示「登录」二字。2. 尺寸样式属性链式调用.width(90%)按钮宽度占父容器宽度的 90%左右预留少量空白不会贴满屏幕边缘。.height(45)按钮固定高度 45px控制按钮垂直高度保证点击区域舒适。.fontSize(16)按钮内部文字字号为 16调整文字大小。.backgroundColor(#007dff)设置按钮背景色为蓝色十六进制色值#007dff鸿蒙常用主题蓝。.borderRadius(8)圆角属性四个边角圆角半径 8px实现柔和圆角按钮避免直角生硬。.onClick()按钮点击触发事件括号内是回调函数手指点击按钮就会执行内部代码。console.log(用户点击了登录按钮)打印日志在 DevEco Studio 底部控制台输出文本用于调试验证点击是否生效。四、参数import router from ohos.router; Entry Component struct RouterRegister{ State username:string State password:string State password2:string build() { Column({space:25}){ Image($r(app.media.2)) .width(120) .height(120) .borderRadius(60) Text(注 册) .fontSize(32) .fontWeight(FontWeight.Bolder) Row(){ Text(账号) .fontSize(26) .width(40%) .textAlign(TextAlign.Center) TextInput({text:this.username}) .width(60%) .height(50) .onChange((value:string){ this.username value }) } Row(){ Text(密码) .fontSize(26) .width(40%) .textAlign(TextAlign.Center) TextInput({text:this.password}) .width(60%) .height(50) .type(InputType.Password) .onChange((value:string){ this.password value }) } Row(){ Text(确认密码) .fontSize(26) .width(40%) .textAlign(TextAlign.Center) TextInput({text:this.password2}) .width(60%) .height(50) .type(InputType.Password) .onChange((value:string){ this.password2 value }) } Text(已有账号立即登录) .fontSize(22) .fontColor(0xababab) .onClick((){ router.pushUrl({ url:pages/RouterLogin }) }) Button(立即注册) .width(100%) .height(50) .fontSize(24) .onClick((){ if ((this.username!) (this.password!) (this.password2!) (this.passwordthis.password2)){ router.pushUrl({ url:pages/HomePage, params:{ username:this.username, password:this.password } }) } else { AlertDialog.show({ title:注册失败, message:注册的两次密码为空或者不一致 ${this.username} }) } }) } .width(100%) .height(100%) .padding(15) } }代码解析1. 路由导入typescript运行import router from ohos.router;引入路由模块提供页面跳转与参数传递 API。2. 无参跳转登录页面router.pushUrl({ url:pages/RouterLogin })pushUrl页面入栈跳转方法url目标页面地址3. 带参跳转首页核心传参代码router.pushUrl({ url:pages/HomePage, params:{ username:this.username, password:this.password } })url:pages/HomePage跳转目标页面路径params路由专属参数载体对象用于跨页传值username、password自定义参数键名下一页取值需同名this.username / this.password当前页面State绑定的输入框数据作为参数值传递4. 参数来源变量State username:string State password:string State响应式变量TextInput 通过onChange同步用户输入作为传给下一页的参数数据源。5. 目标页面固定接收参数代码配套传参读取逻辑aboutToAppear() { let params router.getParams() let name params.username let pwd params.password }router.getParams()读取上一页params中全部传递数据通过.键名取出对应传递过来的值
