一、前言

在鸿蒙（HarmonyOS）应用开发中，卡片式布局是最常用的UI设计之一，广泛应用于个人中心、用户资料、信息展示等场景。

今天带大家从零实现一个极简美观的个人信息卡片组件，基于ArkTS语法、原生组件开发，无需第三方依赖，适配性强、代码简洁易懂，非常适合鸿蒙新手入门学习布局嵌套、组件样式、基础属性配置。

最终实现效果：

• 顶部居中大标题：个人信息中心

• 中部横向布局：圆形头像 + 个人基础信息

• 底部功能按钮：编辑资料、查看详情（双色圆角按钮）

• 整体圆角浅灰卡片样式，适配页面居中展示

二、开发环境

• 开发工具：DevEco Studio

• 开发语言：ArkTS

• 适配系统：HarmonyOS 4.0+

• 项目类型：Stage模型ArkTS项目

三、完整可运行源码

直接复制下方代码，替换页面默认代码即可运行（仅需自行替换头像资源）：

@Entry
@Component
struct PersonalInfoCard {
  build() {
    Column() {
      // 1. 顶部大标题
      Text('个人信息中心')
        .fontSize(22)
        .fontWeight(FontWeight.Bold)
        .textAlign(TextAlign.Center)
        .margin({ bottom: 20 })

      // 2. 中间区域：头像 + 基础信息（水平布局）
      Row({ space: 15 }) {
        // 圆形头像
        Image($r('app.media.1')) // 请替换为你的头像资源
          .width(80)
          .height(80)
          .borderRadius(40)
          .objectFit(ImageFit.Cover)

        // 右侧垂直排列的基础信息
        Column({ space: 8 }) {
          Text('鸿蒙应用开发者：张三')
            .fontSize(16)
          Text('计算机应用工程系')
            .fontSize(16)
        }
        .alignItems(HorizontalAlign.Start)
      }
      .margin({ bottom: 20 })

      // 3. 底部按钮区域（水平布局）
      Row({ space: 15 }) {
        Button('编辑资料')
          .width(120)
          .height(40)
          .borderRadius(8)
          .backgroundColor('#409EFF')
          .fontColor(Color.White)

        Button('查看详情')
          .width(120)
          .height(40)
          .borderRadius(8)
          .backgroundColor('#67C23A')
          .fontColor(Color.White)
      }
    }
    .width('90%')
    .padding(15)
    .backgroundColor('#F5F5F5') // 浅灰色背景
    .borderRadius(12)
    .alignItems(HorizontalAlign.Center)
    .justifyContent(FlexAlign.Start)
    .layoutWeight(1)
  }
}

四、分步部署运行教程（新手必看）

步骤1：新建鸿蒙项目

1. 打开 DevEco Studio，点击 Create Project

2. 选择 Empty Ability 空白模板，点击下一步

3. 设置项目名称、存储路径，语言选择ArkTS，模型选择 Stage

4. 等待项目同步、gradle构建完成

步骤2：替换页面代码

1. 打开项目目录：entry/src/main/ets/pages/Index.ets

2. 删除文件中所有默认代码

3. 粘贴上方完整源码

步骤3：配置头像资源（关键步骤）

1. 准备一张头像图片，命名为1.png/jpg

2. 进入资源目录：entry/src/main/resources/base/media

3. 将图片粘贴到 media 文件夹下

4. 代码中 $r('app.media.1') 即可正常加载头像

5. 如果你的图片名不是1，对应修改代码内的资源名即可

步骤4：运行项目

1. 连接鸿蒙模拟器/真机

2. 点击右上角运行按钮（绿色三角）

3. 等待编译完成，即可看到完整的个人信息卡片页面

五、代码逐行深度解析

1. 组件装饰器与入口定义

@Entry @Component struct PersonalInfoCard {}

• @Entry：标识该组件为页面入口，可单独渲染展示

• @Component：自定义组件装饰器，定义可复用的UI组件

• struct：ArkTS定义组件的关键字

2. 最外层整体布局容器

整个页面基于 Column 垂直布局 搭建，所有元素从上到下依次排列：

Column() {}.width('90%').padding(15).backgroundColor('#F5F5F5').borderRadius(12)

• width('90%')：卡片宽度占屏幕90%，左右留白适配美观

• padding(15)：卡片内边距，防止内容贴边

• backgroundColor('#F5F5F5')：浅灰色卡片背景，符合移动端UI设计规范

• borderRadius(12)：卡片圆角，弱化直角生硬感

• alignItems(HorizontalAlign.Center)：内部元素水平居中

• layoutWeight(1)：占满剩余屏幕高度，适配页面填充

3. 顶部标题模块

Text('个人信息中心') .fontSize(22) .fontWeight(FontWeight.Bold) .textAlign(TextAlign.Center) .margin({ bottom: 20 })

• 字号22号、加粗，作为页面主标题

• 文字居中对齐，底部外边距20，和下方内容分隔

4. 头像+个人信息横向布局模块

使用 Row 水平布局 实现左右排版，左侧头像、右侧文字信息：

4.1 圆形头像设置

Image($r('app.media.1')) .width(80) .height(80) .borderRadius(40) .objectFit(ImageFit.Cover)

• 宽高80px，圆角40px（宽高一半）实现完美圆形头像

• ImageFit.Cover：图片铺满容器，裁剪多余部分，不变形

4.2 右侧文字信息

嵌套 Column 垂直布局，让两行文字上下排列，并且左对齐贴合头像：

Column({ space: 8 }) { Text('鸿蒙应用开发者：张三').fontSize(16) Text('计算机应用工程系').fontSize(16) }.alignItems(HorizontalAlign.Start)

• space:8：两行文字间距8px，排版宽松美观

• 左对齐展示，符合用户信息阅读习惯

5. 底部功能按钮模块

Row水平布局放置两个功能按钮，区分配色，功能分区清晰：

• 编辑资料：主题蓝 #409EFF，常规操作按钮

• 查看详情：成功绿 #67C23A，查看类功能按钮

• 统一宽高、圆角8px，白色字体，样式统一规范

• 按钮间距15px，排版不拥挤

六、核心知识点总结

1. 布局嵌套思想：外层Column垂直整体布局，内层Row实现水平左右排版，是鸿蒙UI最核心的嵌套开发思路

2. 圆形图片实现：borderRadius 设置为宽高的一半，即可实现圆形图片

3. 间距控制：组件space控制内部元素间距，margin控制组件外部间距

4. 卡片UI设计：圆角+浅背景+内边距，快速实现主流移动端卡片样式

七、拓展优化方向（可自行升级）

• 替换静态文字为动态变量，实现用户信息动态渲染

• 为按钮添加点击点击事件（onClick）

• 增加卡片阴影效果，提升立体感

• 适配不同屏幕尺寸，实现自适应布局

八、结语

本案例基于鸿蒙原生ArkTS开发，无任何封装、无第三方插件，代码通俗易懂，非常适合新手练习布局、组件样式开发。掌握这个案例，你可以快速延伸出个人中心、用户资料、名片展示等多种常用业务场景。