HarmonyOS ArkTS 个人信息页面完整代码详解

一、整体概述

这是一段鸿蒙 ArkUI 声明式 UI页面代码，页面路径：/pages/FirstArkpage，功能是展示静态学生个人信息（姓名、专业、年级、学号），通过结构体普通成员变量存储数据，使用模板字符串插值渲染到Text组件，整体页面居中展示、多色文字区分信息。

二、逐块拆解代码

1. 页面装饰器与结构体定义

@Entry @Component struct FirstArkpage { // 1.定义arkTS的内容：普通成员变量（非响应式） stuName: string = '李四'; zyName: string = '计应'; njname: string = '大二'; scNmae:string='123456'

1. @Entry标记当前结构体为独立页面，应用启动 / 路由可直接加载该页面，是页面的入口标识。
2. @Component标识这是一个 ArkUI 自定义组件，必须实现build()方法来绘制界面。
3. 结构体成员变量（普通变量，无@State）
   • stuName：字符串，存储学生姓名；
   • zyName：字符串，存储专业名称；
   • njname：字符串，存储年级；
   • scNmae：字符串，存储学号；

   注意：这里变量拼写scNmae是笔误，规范应为scName。 区别：普通变量修改后页面不会自动刷新；加@State才是响应式变量，修改 UI 自动更新。

2. build () 页面渲染主方法

build()是所有 UI 组件的绘制入口，所有页面控件都写在这个函数内。

build() { Column({space:20}) { // 标题文本 Text('个人信息中心') .fontSize(25) .fontColor(Color.Green) // 姓名（插值读取变量） Text(`姓名: ${this.stuName}`) .fontSize(22) .fontColor(Color.Green) // 专业 Text(`专业: ${this.zyName}`) .fontSize(22) .fontColor(Color.Red) // 年级 Text(`年级: ${this.njname}`) .fontSize(22) .fontColor(Color.Blue) // 学号 Text(`学号: ${this.scNmae}`) .fontSize(22) .fontColor(Color.Blue) } // 外层Column全局样式 .width('100%') .height('100%') .backgroundColor(0xF5F5F5) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) }

（1）根容器：Column({space:20})

• Column：垂直布局容器，内部所有子组件从上到下垂直排列；
• {space:20}：构造参数，设置内部每两个子组件之间的垂直间距为 20 像素。

（2）Text 文字组件 + 模板字符串插值

Text(`姓名: ${this.stuName}`)

1. 反引号`模板字符串：支持${变量名}插值语法，把结构体里定义的变量动态拼接到文字中；
2. this.变量名：在结构体内部访问自身成员变量必须加this.；
3. 文本通用修饰器：
   • .fontSize(数字)：设置文字字号；
   • .fontColor(颜色枚举)：设置文字颜色，内置Color.Green/Red/Blue等基础色。

（3）外层 Column 全局布局修饰器（页面整体效果）

.width('100%') .height('100%')

宽高设为 100%，让Column占满手机整个屏幕。

.backgroundColor(0xF5F5F5)

设置页面背景色为浅灰色，十六进制颜色格式0xRRGGBB。

.justifyContent(FlexAlign.Center)

垂直方向居中：控制 Column 内部子组件整体垂直居中。

.alignItems(HorizontalAlign.Center)

水平方向居中：控制 Column 内部每一个 Text 组件自身水平居中。

三、页面渲染效果对应关系

预览界面从上到下：

1. 绿色大号文字：个人信息中心（字号 25）
2. 绿色文字：姓名: 李四（读取stuName）
3. 红色文字：专业: 计应（读取zyName）
4. 蓝色文字：年级: 大二（读取njname）
5. 蓝色文字：学号: 123456（读取scNmae） 所有文字整体在屏幕正中间，每行文字上下间距 20，背景浅灰。

四、核心知识点讲解

1. 变量插值语法

`固定文字 ${this.变量名}`

ArkTS 中 Text 文本拼接变量的标准写法，替代传统字符串拼接，可读性更高。

2. Column 布局两个居中属性区分

表格

3. 普通成员变量 vs @State 响应式变量

当前代码变量无@State，属于静态变量：

• 页面初始化赋值一次；
• 代码中如果手动修改stuName = "张三"，页面文字不会自动刷新； 如果改为响应式：

@State stuName: string = '李四';

修改变量后 UI 会立刻同步更新，适合输入框、点击修改信息等交互场景。

五、代码存在的小问题与优化建议

1. 变量拼写错误scNmae字母顺序写错，规范应为scName，建议修正避免后续报错。
2. 数据抽离优化信息较多时，可以封装对象存储信息，减少重复代码：

   studentInfo = { name:"李四", major:"计应", grade:"大二", id:"123456" } // 使用：Text(`姓名: ${this.studentInfo.name}`)

3. 统一文字样式多个 Text 重复写.fontSize(22)，可以封装自定义 Text 组件复用样式。
4. 增加交互拓展如果需要点击修改姓名，给变量添加@State，搭配Button+onClick实现动态更新。

六、用到的 ArkUI 基础组件 & API 汇总

表格

ArkTS 鸿蒙登录页面完整代码详解

一、整体项目介绍

页面路径：/pages/ImageDemo1，是一个账号登录表单页面，整合了图片、输入框、开关、按钮、弹窗提示等核心交互组件，完整实现登录校验、清空输入、记住密码开关功能。 核心技术点：@State响应式状态、Image图片、TextInput双向输入、Toggle开关、Button点击事件、AlertDialog弹窗、条件判断逻辑。

二、头部装饰器与响应式状态变量

@Entry @Component struct ImageDemo1 { // 响应式状态变量，修改后页面UI自动刷新 @State isRemb: boolean = true; // 记住密码开关状态，默认开启true @State username: string = ""; // 账号输入框绑定值 @State password: string = ""; // 密码输入框绑定值

1. @Entry：标记为独立页面，可直接路由访问；
2. @Component：标识自定义 UI 组件，必须实现build()；
3. @State核心作用：
   • 修饰的变量是响应式数据；
   • 输入框、开关修改值时，变量同步更新，页面自动重绘；
   • 三个变量分别控制：记住密码开关、账号文本、密码文本。

三、build () 整体布局结构

build() { Column({ space: 30 }) { // 1.圆形头像图片 Image() // 2.标题：账号登录 Text("账号登录") // 3.账号输入框 TextInput() // 4.密码输入框 TextInput() // 5.记住密码文字 + 开关Toggle Row({space:20}){ Text("记住密码"); Toggle() } // 6.登录、清空按钮一行布局 Row({space:20}){ Button("登录"); Button("清空") } } .width('100%') .height('100%') .padding(20) .justifyContent(FlexAlign.Center) }

• 根容器Column({space:30})：垂直布局，内部所有组件上下间距 30；
• .justifyContent(FlexAlign.Center)：内部所有内容垂直居中；
• .padding(20)：页面四周预留 20 内边距，内容不贴屏幕边缘；
• 宽高100%占满整个手机屏幕。

四、分模块逐段解析所有组件

模块 1：圆形头像图片 Image

Image($r('app.media.abc0')) .width(120) .height(120) .borderRadius(60) // 圆角=宽高一半，实现圆形图片 .shadow({ radius: 50, color: Color.Red }) // 红色外围发光阴影

1. $r('app.media.abc0')：读取项目resources/base/media目录下名为abc0的本地图片资源；
2. borderRadius(60)：图片宽高 120，圆角设为 60，完美裁切圆形头像；
3. shadow：添加外阴影，红色大范围光晕，和预览图红色外圈效果一致。

模块 2：登录标题 Text

Text("账号登录") .fontSize(30) .fontWeight(FontWeight.Bolder)

大号加粗标题，作为页面主标题。

模块 3：账号输入框 TextInput

TextInput({text:this.username, placeholder: "请输入账号"}) .width('100%') .height(50) .borderRadius(12) .padding({ left: 20 }) .onChange((value:string)=>{ this.username = value })

1. text:this.username：绑定@State账号变量，实现双向数据绑定；
2. placeholder：输入框空白时显示灰色提示文字；
3. .borderRadius(12)：输入框圆角；padding({left:20})文字距离左侧边框 20 像素；
4. .onChange：输入内容变化时触发回调，把最新输入值赋值给username，实时同步状态。

模块 4：密码输入框 TextInput

TextInput({text:this.password, placeholder: "请输入密码"}) .width('100%') .height(50) .borderRadius(12) .padding({ left: 20 }) .type(InputType.Password) // 密码模式，输入内容圆点隐藏 .onChange((value:string)=>{ this.password = value })

和账号输入框逻辑一致，新增.type(InputType.Password)：输入内容自动变成黑点，隐藏明文密码。

模块 5：记住密码 + 开关 Toggle

Row({ space: 20 }) { Text("记住密码") .fontSize(26) Toggle({ type: ToggleType.Switch, isOn: this.isRemb }) .height(38) .width(80) .selectedColor(Color.Red) // 开关打开时背景红色 .onChange((value: boolean) => { this.isRemb = value }) }

1. Row({space:20})：水平布局，文字和开关横向排列，间距 20；
2. ToggleType.Switch：开关样式（安卓 /iOS 通用滑动开关）；
3. isOn: this.isRemb：绑定布尔状态变量，默认开启红色；
4. .onChange：滑动开关时，自动更新isRemb布尔值，记录用户选择。

模块 6：登录按钮 Button（核心登录校验逻辑）

Button('登录') .width('45%') .height(50) .fontSize(20) .onClick(()=>{ if (this.username && this.password){ // 账号、密码都不为空 → 登录成功弹窗 AlertDialog.show({ title:"登录成功", message:`欢迎你, ${this.username}` }) }else{ // 账号/密码为空 → 登录失败弹窗 AlertDialog.show({ title:"登录失败", message:`用户名${this.username}或密码不正确` }) } })

1. .width('45%')：按钮宽度占整行 45%，两个按钮并排刚好放下；
2. .onClick：点击触发登录校验；
3. 判断逻辑if (this.username && this.password)：
   • 账号、密码两个输入框都有内容：弹出成功弹窗，显示用户名；
   • 任意一个为空：弹出失败提示弹窗；
4. AlertDialog.show()：系统弹窗组件，包含标题 title、提示信息 message。

模块 7：清空按钮 Button

Button('清空') .width('45%') .height(50) .fontSize(20) .onClick(()=>{ this.username="" this.password="" })

点击后将两个输入框绑定的响应式变量赋值为空字符串，输入框内容立刻清空。

五、页面完整运行流程

1. 页面初始化：
   • isRemb=true：记住密码开关默认红色打开；
   • username、password为空，输入框显示占位提示文字；
2. 用户输入账号：TextInput.onChange实时同步到username；
3. 用户输入密码：同步到password，文字自动隐藏为黑点；
4. 滑动记住密码开关：isRemb布尔值自动切换 true/false；
5. 点击【登录】：
   • 账号密码都填写 → 弹出成功弹窗；
   • 任意一个空白 → 弹出失败弹窗；
6. 点击【清空】：两个输入框内容一键清空。

六、核心知识点汇总

1. @State 响应式变量

页面交互核心，输入框、开关修改值后，变量同步更新，UI 自动刷新，无需手动重绘页面。

2. TextInput 双向绑定

text:变量+onChange实现输入内容和状态变量实时同步，表单必备。

3. Toggle 开关组件

布尔类型交互控件，常用于设置类选项（记住密码、自动登录等）。

4. AlertDialog 系统弹窗

无需自定义页面，快速弹出提示框，用于操作结果反馈。

5. 图片圆形处理

width = height+borderRadius = 宽/2标准圆形头像写法，搭配 shadow 实现光晕效果。

6. 布局比例宽度

width('45%')百分比宽度，快速实现两个按钮平分一行。

七、代码拓展优化建议

1. 完善记住密码逻辑：当前仅记录开关状态，可搭配Preferences持久化存储账号密码，下次打开自动填充；
2. 增加输入长度限制：给 TextInput 添加maxLength限制账号密码长度；
3. 表单正则校验：添加手机号 / 账号格式正则判断，提升登录校验严谨性；
4. 抽离按钮组件：登录、清空按钮样式重复，封装自定义 Button 组件简化代码；
5. 增加页面跳转：登录成功后调用router.replaceUrl跳转到首页 / 个人中心页面。

八、用到的 ArkUI 组件清单

表格

ArkTS 鸿蒙 Stack 堆叠、Radio 单选框页面完整代码详解

一、页面整体概述

页面路径：/pages/ImageStackDemo，本案例核心演示 3 大重点组件：

1. Stack 堆叠容器：图层叠加布局（底层图片 + 上层文字浮窗）；
2. Radio 单选框：分组互斥单选（两组独立选项：学习进度、性别）；
3. 图片背景按钮、圆角、边框、填充适配等样式 API。 整体页面从上至下：标题→堆叠图文卡片→两组单选按钮→背景图按钮。

二、页面头部装饰器

@Entry @Component struct ImageStackDemo{ build() { Column() { // 页面全部内容写在这里 } .width('100%') .height('100%') } }

• @Entry：标记为独立页面入口；
• @Component：自定义 UI 组件标识，必须实现build()；
• 根容器Column垂直布局，宽高 100% 铺满屏幕。

三、分模块逐段拆解代码

模块 1：页面顶部标题文本

Text("鸿蒙应用开发实战课程") .fontSize(30) .fontWeight(FontWeight.Bold) .margin({top:30})

• 字号 30、加粗；
• margin({top:30})：距离顶部留出 30 像素外边距，不贴屏幕顶部。

模块 2：Stack 堆叠容器（核心图层叠加）

Stack() { // 底层元素：背景图片 Image($r('app.media.background')) .width(320) .height(180) .borderRadius(15) .objectFit(ImageFit.Cover) // 上层元素：白色悬浮文字标签（自动居中覆盖在图片上） Text('ArKU组件练习') .fontSize(22) .fontColor(Color.White) .backgroundColor(Color.White) .padding({ left: 15, right: 15, top: 6, bottom: 6 }) .borderRadius(8) } .width('100%') .height('40%')

Stack 核心特性

Stack是层叠布局容器，内部子组件后写的元素覆盖在先写元素上方，默认全部居中对齐。

1. 底层Image图片：
   • $r('app.media.background')读取本地媒体资源；
   • objectFit(ImageFit.Cover)：图片等比例铺满容器，裁剪超出部分；
   • borderRadius(15)图片圆角。
2. 上层Text悬浮标签： 白色背景文字浮在蓝色图片正中间，通过padding控制文字四周留白，圆角 8。
3. Stack 整体尺寸：width('100%')占满父容器宽度，高度为父容器 40%。

模块 3：第一组 Radio 单选框（分组：xueli 学习进度）

Radio({value:'Radio1',group:'xueli'}) .checked(false) Radio({value:'Radio2',group:'xueli'}) .checked(false) Radio({value:'Radio3',group:'xueli'}) .checked(true)

Radio 单选核心规则

1. group分组属性：同 group 名称的 Radio 为一组，互斥只能选一个；
2. value：当前单选框唯一标识值；
3. .checked(布尔值)：设置默认选中状态，Radio3默认勾选（预览图里第三个带对勾）；
4. 组件默认垂直排列，所以三个单选框纵向分布，和预览界面一致。

模块 4：第二组 Radio 单选框（分组：sex 性别）

Radio({value:'男',group:'sex'}) .checked(true) Radio({value:'女',group:'sex'}) .checked(false)

• group:'sex'和上一组xueli分组完全隔离，两组选择互不干扰；
• 默认选中「男」。

模块 5：背景图片按钮（带红色粗边框）

Button('开始学习') .width('180') .height('50') .fontSize(26) .backgroundImage($r('app.media.foreground')) .borderRadius(8) .border({width:6,color:Color.Red})

1. .backgroundImage()：给按钮设置本地图片作为背景；
2. .border({width:6,color:Color.Red})：6 像素粗红色边框，对应预览图红色外圈；
3. borderRadius(8)按钮圆角；宽 180 高 50，大号文字居中。

四、核心组件知识点详解

1. Stack 堆叠布局（重点）

表格

对比：

• Column/Row：平面并排；
• Stack：图层上下叠加。

2. Radio 单选分组机制

• 相同group的单选框互斥，同一时间只能选中一个；
• 不同group完全独立，互不影响；
• .checked(true/false)控制初始选中状态；
• 拓展：搭配@State变量可以实现点击切换选中状态，做表单选择。

3. ImageFit.Cover 图片适配

• ImageFit.Cover：图片保持原始比例，完整铺满容器，超出区域自动裁剪； 其他可选适配：
• Contain：完整显示图片，容器留白；
• Fill：拉伸图片填满容器，会变形。

4. Button 背景图 + 边框样式

• .backgroundImage()：替换按钮纯色背景，使用图片填充；
• .border()统一设置边框宽度、颜色，支持圆角搭配做出描边效果。

五、页面渲染顺序

1. 最顶部加粗标题「鸿蒙应用开发实战课程」；
2. Stack 蓝色大图，中间悬浮白色文字标签「ArKU 组件练习」；
3. 第一组 3 个纵向单选框，第三个默认勾选；
4. 第二组 2 个性别单选框，「男」默认勾选；
5. 底部带红色粗边框、背景图的「开始学习」按钮。

六、代码优化拓展建议

1. 增加响应式状态给 Radio 绑定@State变量，点击单选框实时获取选中值，实现表单收集：

   @State selectXueli:string = "Radio3" Radio({value:'Radio1',group:'xueli'}) .checked(this.selectXueli === "Radio1") .onChange((v)=>this.selectXueli = "Radio1")

2. 统一组件间距在 Column 添加space:30，统一所有模块上下间距，消除零散 margin；
3. Stack 居中微调Stack 内 Text 添加alignContent修改悬浮文字位置（顶部 / 底部 / 左右）；
4. 按钮点击事件给 Button 添加.onClick()实现页面跳转、弹窗提示等交互。

七、本页面用到的 ArkUI 组件 & API 汇总

表格