ArkTS代码Entry Component struct ImageDemo { build() { Column({ space: 20 }) { Text(欢迎来到我的个人中心) .fontSize(30) .fontWeight(FontWeight.Bolder) Row({ space: 20 }) { Image($r(app.media.1)) .width(50%) .height(100%) .borderRadius(10) .objectFit(ImageFit.Cover) Column() { Text(石少岩) .width(100%) .fontSize(30) .fontWeight(FontWeight.Medium) Text(鸿蒙应用开发) .width(100%) .fontSize(18) } .width(40%) .justifyContent(FlexAlign.Center) } .height(100) .width(100%) .padding({ left: 20 }) } .width(100%) .height(100%) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) } }代码运行结果代码解析一、页面基础装饰器与组件定义Entry Component struct ImageDemo {Entry页面入口标记代表当前结构体是独立页面可单独预览、路由跳转Component自定义 UI 组件装饰器标识这是 ArkTS 自定义页面组件struct ImageDemo当前页面组件名称为ImageDemo。二、build () 根渲染函数build()是页面渲染入口所有 UI 布局、控件全部写在该函数内部。 外层使用Column 纵向布局承载全部内容build() { Column({ space: 20 }) { // 1.顶部标题文本 // 2.头像个人信息横向Row布局 } // 根Column全局页面样式 .width(100%) .height(100%) .justifyContent(FlexAlign.Center) .alignItems(HorizontalAlign.Center) }三、模块 1页面顶部标题文本typescript运行Text(欢迎来到我的个人中心) .fontSize(30) .fontWeight(FontWeight.Bolder)Text基础文本组件展示页面大标题.fontSize(30)文字字号 30vp.fontWeight(FontWeight.Bolder)文字设置粗体加重显示 该标题会居中显示在页面上方和下方头像区域间隔 20vp。四、模块 2横向 Row 布局头像 姓名专业信息Row({ space: 20 }) { // 左侧头像图片组件 Image($r(app.media.1)) .width(50%) .height(100%) .borderRadius(10) .objectFit(ImageFit.Cover) // 右侧文字信息纵向Column Column() { Text(石少岩) .width(100%) .fontSize(30) .fontWeight(FontWeight.Medium) Text(鸿蒙应用开发) .width(100%) .fontSize(18) } .width(40%) .justifyContent(FlexAlign.Center) } // Row容器整体样式 .height(100) .width(100%) .padding({ left: 20 })1. Row 横向容器基础配置Row({ space: 20 })横向布局左边头像、右边文字两者左右间距 20vp.height(100)整行头像 文字区域固定高度 100vp.width(100%)横向容器宽度占满屏幕.padding({ left: 20 })容器整体左侧留出 20vp 内边距不贴紧屏幕左边缘。2. 左侧 Image 头像组件详解Image($r(app.media.1)) .width(50%) .height(100%) .borderRadius(10) .objectFit(ImageFit.Cover)$r(app.media.1)资源引用写法读取项目media文件夹下名为1的图片作为头像.width(50%)图片宽度占父 Row 容器的 50%.height(100%)图片高度填满父 Row 高度100vp.borderRadius(10)图片圆角 10vp实现圆角头像效果.objectFit(ImageFit.Cover)图片等比例铺满区域超出部分裁剪不变形拉伸。3. 右侧 Column 文字信息容器Column() { Text(石少岩) .width(100%) .fontSize(30) .fontWeight(FontWeight.Medium) Text(鸿蒙应用开发) .width(100%) .fontSize(18) } .width(40%) .justifyContent(FlexAlign.Center)内层 Column 垂直摆放两行文字姓名、专业方向.width(40%)文字区域占父 Row 宽度 40%.justifyContent(FlexAlign.Center)两行文字在 Column 内部垂直居中和左侧头像上下对齐第一行Text(石少岩)姓名字号 30、中等字重宽度填满自身 Column第二行Text(鸿蒙应用开发)专业标签字号 18宽度填满自身 Column五、页面整体布局逻辑梳理最外层全屏 Column让页面所有内容水平 垂直居中第一层子元素大标题「欢迎来到我的个人中心」第二层子元素横向 Row头像 个人信息与标题上下间距 20Row 内部左右拆分左 50% 宽度圆角头像图片右 40% 宽度垂直排列的姓名、专业两行文字头像与文字左右间隔 20vp整行左侧留白 20vp整体高度固定 100vp。
