HarmonyOS ArkTS 个人信息页面完整代码详解和ArkTS 鸿蒙登录页面完整代码详解和ArkTS 鸿蒙 Stack 堆叠、Radio 单选框页面完整代码详解

HarmonyOS ArkTS 个人信息页面完整代码详解一、整体概述这是一段鸿蒙 ArkUI 声明式 UI页面代码页面路径/pages/FirstArkpage功能是展示静态学生个人信息姓名、专业、年级、学号通过结构体普通成员变量存储数据使用模板字符串插值渲染到Text组件整体页面居中展示、多色文字区分信息。二、逐块拆解代码1. 页面装饰器与结构体定义Entry Component struct FirstArkpage { // 1.定义arkTS的内容普通成员变量非响应式 stuName: string 李四; zyName: string 计应; njname: string 大二; scNmae:string123456Entry标记当前结构体为独立页面应用启动 / 路由可直接加载该页面是页面的入口标识。Component标识这是一个 ArkUI 自定义组件必须实现build()方法来绘制界面。结构体成员变量普通变量无StatestuName字符串存储学生姓名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 像素。2Text 文字组件 模板字符串插值Text(姓名: ${this.stuName})反引号模板字符串支持${变量名}插值语法把结构体里定义的变量动态拼接到文字中this.变量名在结构体内部访问自身成员变量必须加this.文本通用修饰器.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 组件自身水平居中。三、页面渲染效果对应关系预览界面从上到下绿色大号文字个人信息中心字号 25绿色文字姓名: 李四读取stuName红色文字专业: 计应读取zyName蓝色文字年级: 大二读取njname蓝色文字学号: 123456读取scNmae 所有文字整体在屏幕正中间每行文字上下间距 20背景浅灰。四、核心知识点讲解1. 变量插值语法固定文字 ${this.变量名}ArkTS 中 Text 文本拼接变量的标准写法替代传统字符串拼接可读性更高。2. Column 布局两个居中属性区分表格属性作用.justifyContent(FlexAlign.Center)垂直方向所有子组件整体在容器中间.alignItems(HorizontalAlign.Center)水平方向每个子组件自身在本行居中3. 普通成员变量 vs State 响应式变量当前代码变量无State属于静态变量页面初始化赋值一次代码中如果手动修改stuName 张三页面文字不会自动刷新 如果改为响应式State stuName: string 李四;修改变量后 UI 会立刻同步更新适合输入框、点击修改信息等交互场景。五、代码存在的小问题与优化建议变量拼写错误scNmae字母顺序写错规范应为scName建议修正避免后续报错。数据抽离优化信息较多时可以封装对象存储信息减少重复代码studentInfo { name:李四, major:计应, grade:大二, id:123456 } // 使用Text(姓名: ${this.studentInfo.name})统一文字样式多个 Text 重复写.fontSize(22)可以封装自定义 Text 组件复用样式。增加交互拓展如果需要点击修改姓名给变量添加State搭配ButtononClick实现动态更新。六、用到的 ArkUI 基础组件 API 汇总表格语法 / 组件功能Entry页面入口装饰器ComponentUI 组件装饰器struct 结构体承载页面逻辑与 UIbuild()UI 渲染入口函数Column垂直线性布局容器Text文字展示组件${this.变量}模板字符串变量插值.fontSize()设置文字大小.fontColor()设置文字颜色.width() / .height()设置组件宽高.backgroundColor()设置背景色justifyContent主轴垂直对齐方式alignItems交叉轴水平对齐方式Column ({space: 数值})设置子组件间距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 ; // 密码输入框绑定值Entry标记为独立页面可直接路由访问Component标识自定义 UI 组件必须实现build()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圆形头像图片 ImageImage($r(app.media.abc0)) .width(120) .height(120) .borderRadius(60) // 圆角宽高一半实现圆形图片 .shadow({ radius: 50, color: Color.Red }) // 红色外围发光阴影$r(app.media.abc0)读取项目resources/base/media目录下名为abc0的本地图片资源borderRadius(60)图片宽高 120圆角设为 60完美裁切圆形头像shadow添加外阴影红色大范围光晕和预览图红色外圈效果一致。模块 2登录标题 TextText(账号登录) .fontSize(30) .fontWeight(FontWeight.Bolder)大号加粗标题作为页面主标题。模块 3账号输入框 TextInputTextInput({text:this.username, placeholder: 请输入账号}) .width(100%) .height(50) .borderRadius(12) .padding({ left: 20 }) .onChange((value:string){ this.username value })text:this.username绑定State账号变量实现双向数据绑定placeholder输入框空白时显示灰色提示文字.borderRadius(12)输入框圆角padding({left:20})文字距离左侧边框 20 像素.onChange输入内容变化时触发回调把最新输入值赋值给username实时同步状态。模块 4密码输入框 TextInputTextInput({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记住密码 开关 ToggleRow({ 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 }) }Row({space:20})水平布局文字和开关横向排列间距 20ToggleType.Switch开关样式安卓 /iOS 通用滑动开关isOn: this.isRemb绑定布尔状态变量默认开启红色.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}或密码不正确 }) } }).width(45%)按钮宽度占整行 45%两个按钮并排刚好放下.onClick点击触发登录校验判断逻辑if (this.username this.password)账号、密码两个输入框都有内容弹出成功弹窗显示用户名任意一个为空弹出失败提示弹窗AlertDialog.show()系统弹窗组件包含标题 title、提示信息 message。模块 7清空按钮 ButtonButton(清空) .width(45%) .height(50) .fontSize(20) .onClick((){ this.username this.password })点击后将两个输入框绑定的响应式变量赋值为空字符串输入框内容立刻清空。五、页面完整运行流程页面初始化isRembtrue记住密码开关默认红色打开username、password为空输入框显示占位提示文字用户输入账号TextInput.onChange实时同步到username用户输入密码同步到password文字自动隐藏为黑点滑动记住密码开关isRemb布尔值自动切换 true/false点击【登录】账号密码都填写 → 弹出成功弹窗任意一个空白 → 弹出失败弹窗点击【清空】两个输入框内容一键清空。六、核心知识点汇总1. State 响应式变量页面交互核心输入框、开关修改值后变量同步更新UI 自动刷新无需手动重绘页面。2. TextInput 双向绑定text:变量onChange实现输入内容和状态变量实时同步表单必备。3. Toggle 开关组件布尔类型交互控件常用于设置类选项记住密码、自动登录等。4. AlertDialog 系统弹窗无需自定义页面快速弹出提示框用于操作结果反馈。5. 图片圆形处理width heightborderRadius 宽/2标准圆形头像写法搭配 shadow 实现光晕效果。6. 布局比例宽度width(45%)百分比宽度快速实现两个按钮平分一行。七、代码拓展优化建议完善记住密码逻辑当前仅记录开关状态可搭配Preferences持久化存储账号密码下次打开自动填充增加输入长度限制给 TextInput 添加maxLength限制账号密码长度表单正则校验添加手机号 / 账号格式正则判断提升登录校验严谨性抽离按钮组件登录、清空按钮样式重复封装自定义 Button 组件简化代码增加页面跳转登录成功后调用router.replaceUrl跳转到首页 / 个人中心页面。八、用到的 ArkUI 组件清单表格组件功能用途Image展示本地图片、圆形头像Text静态文字展示TextInput文本输入框、密码输入框Toggle滑动开关控件Button点击交互按钮Column垂直布局容器Row水平布局容器AlertDialog弹窗提示框ArkTS 鸿蒙 Stack 堆叠、Radio 单选框页面完整代码详解一、页面整体概述页面路径/pages/ImageStackDemo本案例核心演示 3 大重点组件Stack 堆叠容器图层叠加布局底层图片 上层文字浮窗Radio 单选框分组互斥单选两组独立选项学习进度、性别图片背景按钮、圆角、边框、填充适配等样式 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 像素外边距不贴屏幕顶部。模块 2Stack 堆叠容器核心图层叠加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是层叠布局容器内部子组件后写的元素覆盖在先写元素上方默认全部居中对齐。底层Image图片$r(app.media.background)读取本地媒体资源objectFit(ImageFit.Cover)图片等比例铺满容器裁剪超出部分borderRadius(15)图片圆角。上层Text悬浮标签 白色背景文字浮在蓝色图片正中间通过padding控制文字四周留白圆角 8。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 单选核心规则group分组属性同 group 名称的 Radio 为一组互斥只能选一个value当前单选框唯一标识值.checked(布尔值)设置默认选中状态Radio3默认勾选预览图里第三个带对勾组件默认垂直排列所以三个单选框纵向分布和预览界面一致。模块 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}).backgroundImage()给按钮设置本地图片作为背景.border({width:6,color:Color.Red})6 像素粗红色边框对应预览图红色外圈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()统一设置边框宽度、颜色支持圆角搭配做出描边效果。五、页面渲染顺序最顶部加粗标题「鸿蒙应用开发实战课程」Stack 蓝色大图中间悬浮白色文字标签「ArKU 组件练习」第一组 3 个纵向单选框第三个默认勾选第二组 2 个性别单选框「男」默认勾选底部带红色粗边框、背景图的「开始学习」按钮。六、代码优化拓展建议增加响应式状态给 Radio 绑定State变量点击单选框实时获取选中值实现表单收集State selectXueli:string Radio3 Radio({value:Radio1,group:xueli}) .checked(this.selectXueli Radio1) .onChange((v)this.selectXueli Radio1)统一组件间距在 Column 添加space:30统一所有模块上下间距消除零散 marginStack 居中微调Stack 内 Text 添加alignContent修改悬浮文字位置顶部 / 底部 / 左右按钮点击事件给 Button 添加.onClick()实现页面跳转、弹窗提示等交互。七、本页面用到的 ArkUI 组件 API 汇总表格组件 / 修饰器功能Stack图层堆叠布局容器Column垂直线性布局Text静态文字展示Image本地图片渲染Radio单选框组件支持分组互斥Button可点击按钮支持背景图、边框objectFit(ImageFit.Cover)图片填充适配borderRadius圆角统一 APIborder({width,color})自定义边框样式backgroundImage给组件设置图片背景margin / padding外边距、内边距控制