开源鸿蒙 PC 版真机运行 —— 鸿蒙原生开发案例之开发者应用个人信息卡片实践

一键难忘

259人浏览 · 2026-01-20 16:14:41

一键难忘 · 2026-01-20 16:14:41 发布

文章目录

开源鸿蒙 PC 版真机运行 —— 鸿蒙原生开发案例之开发者应用个人信息卡片实践

开源鸿蒙 PC 版真机运行 —— 鸿蒙原生开发案例之开发者应用个人信息卡片实践

在这里插入图片描述

一、背景

随着 OpenHarmony 在 PC 形态上的持续推进，鸿蒙“一多适配”能力正从概念逐步落地到真实生产环境。
在实际开发中，PC 端应用既需要保留移动端的灵活交互，又要兼顾大屏布局、侧边栏结构以及桌面级体验。

本文基于 鸿蒙 PC 真机环境，以一个 鸿蒙开发者应用中的个人信息卡片模块 为例，完整展示：

ArkUI 声明式 UI 在 PC 端的真实运行效果
一多适配架构下的布局设计思路
个人信息卡片组件的核心实现方式

该案例适合用于：

鸿蒙开发者工具类应用
管理后台 / 个人中心
PC 端左侧导航 + 信息面板结构

在这里插入图片描述

二、鸿蒙一多适配与整体架构设计

在这里插入图片描述

1. 一多适配核心思路

在鸿蒙原生开发中，“一多”并不是简单的响应式，而是：

一套业务逻辑
多终端 UI 能力适配
根据设备形态（PC / Pad / Phone）进行布局组合

在 PC 端常见的结构是：

| 左侧固定侧边栏 | 右侧内容区 |

本案例中的 个人信息卡片 正是左侧侧边栏中的核心组件之一。

2. 架构划分

在代码结构上，个人信息卡片具备以下特点：

UI 与数据解耦
信息通过 userInfo 状态对象统一管理
VIP 状态通过 isVip 条件渲染
组件可独立抽离为公共模块

在这里插入图片描述

三、个人信息卡片核心代码解析

下面是本案例的 核心 UI 实现代码，基于 ArkUI 的声明式语法编写，适配 PC 端左侧固定宽度侧边栏。

// 左侧侧边栏（宽度固定）
Column() {
  // 个人信息卡片
  Column() {
    // 头像
    Image($r('app.media.nanwang'))
      .width(80)
      .height(80)
      .borderRadius(40)
      .border({ width: 2, color: '#007DFF' })
      .margin({ bottom: 10 })
      .onClick(() => {
        this.refreshUserInfo(); // 点击头像刷新信息
      })

    // 昵称和手机号
    Text(this.userInfo.nickname)
      .fontSize(20)
      .fontWeight(FontWeight.Bold)
      .margin({ bottom: 5 })

    Text(this.userInfo.phone)
      .fontSize(14)
      .fontColor('#666')
      .margin({ bottom: 10 })

    // 等级和VIP标识
    Row() {
      Text(`LV.${this.userInfo.level}`)
        .fontSize(12)
        .backgroundColor('#E6F7FF')
        .fontColor('#007DFF')
        .padding({ left: 8, right: 8, top: 2, bottom: 2 })
        .borderRadius(10)
        .margin({ right: 8 })

      if (this.isVip) {
        Text('VIP')
          .fontSize(12)
          .backgroundColor('#FFD700')
          .fontColor('#FFFFFF')
          .padding({ left: 8, right: 8, top: 2, bottom: 2 })
          .borderRadius(10)
      }
    }

    // 积分和VIP到期时间
    Row() {
      Text(`积分: ${this.userInfo.integral}`)
        .fontSize(12)
        .fontColor('#666')
        .margin({ right: 15 })

      if (this.isVip) {
        Text(`VIP到期: ${this.userInfo.vipExpire}`)
          .fontSize(12)
          .fontColor('#666')
      }
    }
    .margin({ top: 8 })
  }
  .width('100%')
  .padding(20)
  .backgroundColor('#FFFFFF')
  .borderRadius(10)
  .shadow({ radius: 5, color: '#00000010', offsetX: 0, offsetY: 2 })
  .margin({ bottom: 20 })
}