ArkTS鸿蒙 ArkUI宿舍底部 Tab 页面代码完整解析一、整体项目说明这份代码是HarmonyOS ArkTS 声明式 UI页面实现底部 4 标签导航首页 / 推荐 / 发现 / 我的宿舍管理页面页面入口/pages/DormTabPage由Entry标记为应用页面核心能力点击底部 Tab 切换不同内容区域4 个页面分别使用Swiper轮播、Grid网格、普通文本、个人中心状态驱动用State装饰器变量currentIndex控制页面切换点击 Tab 修改索引UI 自动刷新。二、逐段代码拆解讲解1. 页面头部装饰器与结构体定义Entry Component struct DormTabPage{ State currentIndex: number 0 //0首页、1推荐、2发现、3我的Entry标识当前结构体是独立页面系统可路由跳转渲染Component标识自定义 UI 组件必须实现build()方法构建界面State currentIndex: number 0State状态装饰器变量变化时页面自动重绘currentIndexTab 选中索引默认 0首页激活映射规则0 首页1 推荐2 发现3 我的。2. build () 根布局整体结构build(){ Column(){ // 上方内容区域动态切换4个页面 Column(){ // 4组if判断根据currentIndex渲染对应页面 // 1.首页 if(this.currentIndex 0){ ... } // 2.推荐页 if(this.currentIndex 1){ ... } // 3.发现页 if(this.currentIndex 2){ ... } // 4.我的页面 if(this.currentIndex 3){ ... } } .flexGrow(1) // 关键占满剩余高度把底部导航挤到屏幕最下方 // 底部Tab导航栏 Row(){ Text(首页)... Text(推荐)... Text(发现)... Text(我的)... } .width(100%) .height(55) .border({width:{top:1},color:#cccccc}) } .width(100%) .height(100%) }布局逻辑根容器Column垂直布局占满全屏宽高上方内容容器Column添加.flexGrow(1)自动填充屏幕剩余高度底部导航栏固定在页面底部下方Row水平容器承载 4 个 Tab 文字统一高度 55顶部加灰色分割线区分内容区。三、4 个页面内容模块详解模块 1首页currentIndex0—— Swiper 舍友轮播if(this.currentIndex 0){ Column(){ Text(517宿舍) .fontSize(24) .fontWeight(FontWeight.Bold) .margin({top:20,bottom:20}) Swiper(){ // 轮播项1 Text(舍友1王五\n学号2025001) .width(100%) .height(180) .backgroundColor(#E8F4FD) .fontSize(20) .textAlign(TextAlign.Center) // 轮播项2 Text(舍友2李四\n学号2025002) .width(100%) .height(180) .backgroundColor(#FFF3E0) .fontSize(20) .textAlign(TextAlign.Center) // 轮播项3 Text(舍友3王五\n学号2025003) .width(100%) .height(180) .backgroundColor(#E7F5E9) .fontSize(20) .textAlign(TextAlign.Center) } .width(92%) .height(180) .indicator(true) // 开启轮播底部小圆点指示器 } }功能说明Swiper鸿蒙轮播组件内部每一个子组件为一页滑动卡片.indicator(true)显示分页圆点当前页面蓝色高亮三张卡片分别展示 3 位舍友信息不同浅底色区分顶部标题「517 宿舍」加粗上下外边距 20。模块 2推荐页currentIndex1—— Grid 6 宫格宿舍信息if(this.currentIndex 1){ Column(){ Text(推荐页-宿舍信息格子) .fontSize(24) .fontWeight(FontWeight.Bold) .margin({top:20,bottom:30}) Grid(){ ForEach([1,2,3,4,5,6], (item:number){ GridItem(){ Text(信息${item}) .width(90%) .height(90) .border({width:1,color:Color.Black}) .textAlign(TextAlign.Center) .fontSize(18) } }) } .columnsTemplate(1fr 1fr 1fr) // 3列均分宽度 .width(90%) } }核心知识点Grid网格容器 GridItem网格项实现多列格子布局.columnsTemplate(1fr 1fr 1fr)设置 3 列每列宽度均等fr 剩余空间均分ForEach循环渲染数组快速生成 6 个格子无需重复写 6 遍 Text每个格子黑色边框高度 90居中显示文字。模块 3发现页currentIndex2—— 静态介绍文本if(this.currentIndex 2){ Column(){ Text(欢迎来到新517宿舍,\n下面介绍一下宿舍信息。) .fontSize(22) .margin({top:40}) } }最简单页面仅居中展示一段介绍文案\n实现文字换行顶部外边距 40。模块 4我的页面currentIndex3—— 个人中心占位if(this.currentIndex 3){ Column(){ Text(我的页面) .fontSize(24) } }预留个人中心页面仅标题占位可后续拓展头像、姓名、宿舍信息、设置等功能。四、底部 Tab 导航栏完整逻辑核心切换交互Row(){ // Tab1 首页 Text(首页) .fontSize(17) // 三元表达式选中索引0时蓝色否则黑色 .fontColor(this.currentIndex0?Color.Blue:Color.Black) .flexGrow(1) // 4个Tab均分一行宽度 .textAlign(TextAlign.Center) // 点击切换索引触发页面刷新 .onClick(()this.currentIndex0) // Tab2 推荐 Text(推荐) .fontSize(17) .fontColor(this.currentIndex1?Color.Blue:Color.Black) .flexGrow(1) .textAlign(TextAlign.Center) .onClick(()this.currentIndex1) // Tab3 发现 Text(发现) .fontSize(17) .fontColor(this.currentIndex2?Color.Blue:Color.Black) .flexGrow(1) .textAlign(TextAlign.Center) .onClick(()this.currentIndex2) // Tab4 我的 Text(我的) .fontSize(17) .fontColor(this.currentIndex3?Color.Blue:Color.Black) .flexGrow(1) .textAlign(TextAlign.Center) .onClick(()this.currentIndex3) } .width(100%) .height(55) .border({width:{top:1},color:#cccccc})交互与样式关键点.flexGrow(1)4 个 Text 平分Row整行宽度均匀分布底部文字颜色三元判断匹配currentIndex则蓝色高亮未选中黑色.onClick(()this.currentIndexX)点击修改状态变量State自动触发页面重绘上方if判断渲染对应页面整体高度 55顶部灰色边框和上方内容区分模拟 App 底部导航栏标准样式。五、代码整体运行流程页面初始化currentIndex0默认渲染首页 Swiper 轮播底部「首页」文字蓝色用户点击底部「推荐」执行onClick修改currentIndex1State检测变量变化页面重新执行build()if(this.currentIndex 1)成立渲染 Grid6 宫格「推荐」文字变蓝点击「发现 / 我的」同理切换对应页面内容与 Tab 高亮。六、用到的 ArkUI 核心组件总结表格组件用途Column垂直线性布局Row水平线性布局Text文字展示Swiper滑动轮播图Grid GridItem网格多列布局ForEach列表循环渲染State响应式状态管理flexGrow弹性占满剩余空间onClick点击事件绑定七、优化拓展建议可选抽离复用 Tab 组件4 个 Tab 代码重复可封装自定义 TabItem 组件减少冗余数据抽离舍友信息、Grid 格子数据提取到数组变量避免写死在 UI 内添加图标Tab 搭配Image图标做成图文导航主流 App 底部 Tab 样式动画过渡页面切换添加animateTo过渡动画切换更顺滑拆分页面4 个页面拆分为独立子组件build()代码更简洁。ArkTS State 响应式变量 TextInput 双向绑定完整代码详解一、页面整体概述页面路径/pages/StatesDemo3核心演示 **State 响应式状态管理 ** 与TextInput输入框双向数据绑定定义State字符串变量存储输入内容输入框实时捕获用户输入同步更新状态变量上方 Text 文字实时同步展示输入框内容输入文字变化文字立刻刷新。 信心指数10 分全部为鸿蒙 ArkUI 标准状态管理语法无推测内容。二、头部装饰器与响应式变量定义Entry Component struct StatesDemo3{ // 响应式状态变量存储输入框文本初始为空字符串 State inputText:string Entry标记当前结构体是独立页面可直接路由加载Component自定义 UI 组件标识必须实现build()渲染界面State inputText:string State响应式装饰器核心作用变量发生修改时页面自动重新渲染所有使用该变量的 UI 同步更新inputText字符串类型专门用来接收、保存 TextInput 输入的文字初始值为空字符串页面刚打开时无输入内容。三、build () 根布局整体结构build() { Column({space:20}){ // 实时展示输入内容的文本 Text(你输入的内容是: ${this.inputText}) .fontSize(26) // 文本输入框 TextInput({text:this.inputText, placeholder:请输入任意内容}) .width(100%) .height(50) .padding({left:20}) .onChange((value: string) { this.inputText value }) } .width(100%) .height(100%) .padding(30) }根容器 Column 全局配置Column({space:20}){ ... } .width(100%) .height(100%) .padding(30)Column({space:20})垂直布局文字与输入框上下间距 20vp宽高100%铺满手机屏幕.padding(30)页面四周预留 30 像素内边距组件不贴屏幕边缘。四、分模块逐段拆解代码模块 1实时回显文本 TextText(你输入的内容是: ${this.inputText}) .fontSize(26)模板字符串...${变量}反引号语法可直接嵌入结构体变量${this.inputText}读取State响应式变量实时展示输入内容核心效果只要inputText变量被修改这段文字会自动刷新无需手动重绘页面字号 26放大文字方便查看回显效果。模块 2核心输入框 TextInput双向绑定逻辑TextInput({text:this.inputText, placeholder:请输入任意内容}) .width(100%) .height(50) .padding({left:20}) .onChange((value: string) { this.inputText value })1. TextInput 构造入参text:this.inputText输入框绑定状态变量实现数据流向 UIplaceholder:请输入任意内容输入框空白时显示灰色提示文字。2. 样式修饰器.width(100%)输入框占满父容器全部宽度.height(50)固定输入框高度 50vp.padding({left:20})输入文字距离左侧边框 20 像素避免文字贴边。3. .onChange 回调UI 流向数据.onChange((value: string) { this.inputText value })用户每输入 / 删除一个字符触发onChange回调value为输入框当前最新完整文本将最新文本赋值给this.inputText响应式变量完成数据同步。五、双向绑定完整数据流核心原理数据 → UItext 绑定text:this.inputText变量的值会同步显示在输入框内UI → 数据onChange用户打字触发onChange把输入内容赋值给inputTextState 自动刷新inputText发生变化后页面自动重绘上方 Text 读取最新变量值实现实时回显。运行流程示例页面初始化inputText 上方文字仅显示「你输入的内容是:」在输入框输入helloonChange捕获valuehello执行this.inputText helloState检测变量变更页面刷新上方文字变为「你输入的内容是: hello」删除文字变量同步清空文字同步消失。六、核心知识点State 响应式变量对比普通变量普通成员变量无 State修改变量后页面 UI 不会自动更新文字不会同步变化State 修饰变量变量变更 → 页面自动重渲染 → 所有引用该变量的组件同步刷新 本案例是表单输入、实时回显最基础的标准写法。七、代码拓展优化建议限制输入长度给 TextInput 添加.maxLength(20)限制最多输入 20 个字符输入类型区分手机号输入添加.type(InputType.PhoneNumber)数字输入键盘 密码输入.type(InputType.Password)隐藏明文清空按钮新增 Button点击执行this.inputText 一键清空输入框输入校验在onChange内增加判断过滤空格、特殊字符多输入框联动新增第二个 TextInput共用同一个State变量实现多输入框同步内容。八、本页面用到的 ArkUI 组件 API 汇总表格语法 / 组件功能说明Entry页面入口装饰器ComponentUI 组件装饰器State响应式状态装饰器驱动 UI 自动刷新Column垂直布局容器Text文字展示实时回显输入内容TextInput文本输入框接收用户输入${this.变量}模板字符串变量插值onChange()输入框内容变更监听回调placeholder输入框空白提示文字padding / width / height组件尺寸与内边距样式ArkTS Swiper 轮播图完整代码详解一、页面整体概述页面路径/pages/SwiperDemo核心实现图片自动轮播组件 Swiper搭配数组 ForEach 循环批量渲染校园图片轮播完整包含指示器、自动播放、循环滚动、轮播间隔等常用配置。 页面结构顶部学院标题 图片轮播模块整体垂直布局四周预留内边距。 信心指数10 分全部为鸿蒙 ArkUI 官方标准 Swiper、ForEach 数组渲染语法无推测内容。二、头部装饰器与图片数组定义Entry Component struct SwiperDemo{ // 私有图片资源数组存储3张本地图片资源 private abcList:Resource[][ $r(app.media.abc0), $r(app.media.abc1), $r(app.media.abc2) ]Entry标记为独立页面入口Component自定义 UI 组件必须实现build()渲染界面private abcList:Resource[]private私有成员仅当前页面内可访问Resource[]资源类型数组专门存放图片 / 媒体资源$r(app.media.xxx)读取项目resources/base/media目录下的本地图片数组内存放 3 张校园图片供下方 ForEach 循环遍历渲染轮播项。三、build () 根布局整体结构build(){ Column(){ // 页面标题 Text(欢迎来到河北软件职业技术学院) .fontSize(30) .fontWeight(FontWeight.Bolder) // 核心轮播Swiper Swiper(){ ForEach(this.abcList,(item:Resource){ Image(item) .objectFit(ImageFit.Cover) }) } .width(100%) .height(180) .indicator(true) .autoPlay(true) .interval(3000) .loop(true) } .padding(10) }根容器 Column 配置Column垂直布局标题与轮播图上下排列.padding(10)页面整体四周预留 10 像素内边距组件不贴屏幕边缘。四、分模块逐段拆解代码模块 1页面标题文本Text(欢迎来到河北软件职业技术学院) .fontSize(30) .fontWeight(FontWeight.Bolder)字号 30、超粗字体作为页面主标题自动与下方 Swiper 保留默认间距。模块 2Swiper 轮播容器 ForEach 循环渲染核心Swiper(){ // 循环遍历图片数组批量生成轮播图片 ForEach(this.abcList,(item:Resource){ Image(item) .objectFit(ImageFit.Cover) }) } // Swiper全局配置修饰器 .width(100%) .height(180) .indicator(true) .autoPlay(true) .interval(3000) .loop(true)1. ForEach 数组循环渲染ForEach(this.abcList,(item:Resource){ Image(item).objectFit(ImageFit.Cover) })ForEach(数组, (单条数据){渲染组件})ArkTS 列表循环语法依次取出数组里 3 张图片资源每一张生成一个 Image作为 Swiper 的一页轮播内容objectFit(ImageFit.Cover)图片等比例铺满轮播容器超出区域自动裁剪不变形留白。2. Swiper 全部配置修饰器详解表格修饰器功能说明.width(100%) .height(180)轮播宽度铺满屏幕固定高度 180vp.indicator(true)开启底部分页小圆点指示器标识当前第几页.autoPlay(true)开启自动轮播无需手动滑动.interval(3000)自动轮播切换间隔单位毫秒30003 秒切换一张.loop(true)开启无限循环滑到最后一张后自动切回第一张不会终止五、页面完整运行流程页面初始化读取abcList数组内 3 张校园图片ForEach 循环批量生成 3 张 Image放入 Swiper 轮播容器页面加载完成后自动开启轮播每 3 秒切换一张图片底部显示 3 个小圆点指示器当前页面圆点高亮滑动到最后一张图片后自动无缝切回第一张无限循环播放。六、核心知识点讲解1. Swiper 轮播组件使用场景首页 Banner、校园海报、商品轮播、图片相册是 App 首页最常用组件。2. ForEach 循环优势无需手动重复写 3 次 Image 组件新增 / 删除图片只需修改abcList数组代码复用、易维护。3. Resource 资源数组统一管理图片资源适合批量图片场景区分于单张图片单独引用。4. ImageFit.Cover 图片适配保证图片填满轮播框不会拉伸变形是 Banner 轮播标准适配方案。七、拓展优化建议自定义指示器样式添加indicatorStyle()修改圆点大小、颜色、间距手动控制轮播搭配SwiperController实现上一页 / 下一页按钮手动切换轮播停止逻辑页面失去焦点时关闭 autoPlay节省性能图片点击事件给 Image 添加.onClick()点击轮播图跳转详情页面动态数组结合State修饰数组实现网络请求动态加载轮播图片。八、本页面用到的 ArkUI 组件 API 汇总表格组件 / 语法功能Swiper滑动轮播容器ForEach数组循环批量渲染组件Image图片展示组件Column垂直布局容器Text页面标题文字Resource[]图片资源数组类型$r(app.media)读取本地 media 图片资源indicator()开启 / 关闭分页指示器autoPlay()自动播放开关interval()自动切换时间间隔loop()无限循环开关objectFit(ImageFit.Cover)图片填充适配模式