一、服务卡片设计规范与原型设计

鸿蒙5的服务卡片遵循"轻量化、场景化、智能化"原则，设计时需注意以下核心规范（参见）：

1. 尺寸标准：支持1x2（117x224vp）、2x2（224x224vp）、2x4（224x480vp）、4x4（480x480vp）四种基础规格
2. 安全区域：内容距离卡片边缘至少12vp，避免被系统圆角裁剪
3. 视觉样式：
   • 圆角半径统一24vp
   • 阴影参数：X轴0vp，Y轴10vp，模糊20vp
   • 间距系统以8vp为基准单位

设计原型示例（2x2天气卡片）：

Header（44vp高）
├─ 天气图标（24x24vp）
└─ 城市名称（16号字）
Content Area
├─ 温度显示（28号字）
└─ 空气质量标签（12号字）
Footer（36vp高）
└─ 刷新按钮（28x28vp）

二、ArkTS卡片开发实战

1. 创建卡片工程
在DevEco Studio中选择"File > New > Project"，使用Atomic Service模板创建元服务项目（参考）。通过右键菜单选择"New > Service Widget"可添加卡片模块。

2. 基础卡片布局代码

// 天气卡片示例（2x2尺寸）
@Entry
@Component
struct WeatherCard {
  @State temperature: number = 26
  @State airQuality: string = '优'

  build() {
    Column() {
      // Header区域
      Row() {
        Image($r('app.media.weather_icon'))
          .width(24).height(24)
          .margin({ right: 8 })
        Text('北京市')
          .fontSize(16)
      }
      .height(44)
      .padding(12)

      // Content区域
      Column() {
        Text(`${this.temperature}℃`)
          .fontSize(28)
          .margin({ bottom: 8 })
        Text(`空气质量：${this.airQuality}`)
          .fontSize(12)
      }
      .flexGrow(1)

      // Footer区域
      Row() {
        Button() {
          Image($r('app.media.refresh_icon'))
            .width(28).height(28)
        }
        .onClick(() => {
          // 刷新数据逻辑
        })
      }
      .height(36)
      .justifyContent(FlexAlign.Center)
    }
    .width(224).height(224)
    .borderRadius(24)
    .backgroundColor('#FFFFFF')
    .padding(12)
  }
}

3. 关键实现说明

• 布局结构：通过Column纵向容器划分Header/Content/Footer三部分
• 尺寸单位：统一使用vp（虚拟像素）保证多设备适配
• 资源引用：$r('app.media.xxx')引用resources目录下的媒体资源
• 状态管理：@State装饰器实现数据驱动UI更新（参考）

三、响应式布局适配方案

针对不同尺寸卡片，可通过条件渲染实现自适应布局：

@Builder
dynamicContent() {
  if (this.cardSize === '2x4') {
    Column() {
      // 大尺寸卡片扩展内容
      WeatherChartComponent()
    }
  } else {
    Column() {
      // 基础内容展示
      Text('三日天气预报')
    }
  }
}

四、卡片动态化配置

在form_config.json中设置卡片属性（参考）：

{
  "isDynamic": true,
  "supportDimensions": ["2x2","2x4"],
  "updateEnabled": true,
  "scheduledUpdateTime": 3600
}

• isDynamic标记动态卡片
• scheduledUpdateTime设置定时刷新间隔（秒）

五、部署与调试

1. 通过DevEco Studio的Previewer实时预览布局
2. 使用hdc命令推送应用到模拟器：

hdc install widget.hap

1. 在设备桌面长按应用图标，选择"添加服务卡片"测试实际效果（参考）

新手建议：

1. 优先使用Flex弹性布局简化适配逻辑
2. 通过@Preview装饰器快速验证组件样式
3. 官方文档中查阅@kit.UIDesignKit获取设计系统组件（参考）
4. 卡片内容更新推荐使用异步数据加载机制

本案例完整呈现了从设计规范到代码实现的开发闭环，建议结合官方提供的UI Design Kit组件库（参考）实现更精致的视觉效果。实际开发中需注意卡片生命周期管理，及时释放资源保障系统性能。