「鸿蒙智能体实战记录 08」贺词展示卡片开发：变量配置与横向容器组合实现

📘 鸿蒙智能体实战记录 08

贺词展示卡片开发：变量配置与横向容器组合实现

一、本篇目标

完成以下内容：

创建贺词展示卡片
添加 4 个运行变量
构建横向与纵向组合结构
绑定变量至对应区块
验证完整渲染效果

二、创建卡片

进入：

复制代码

卡片 → 新建卡片

填写基础信息：

复制代码

卡片名称：马年贺词展示
卡片描述：用于展示马年新春贺词正文、强调祝福与成语补充。

保存后进入卡片编辑页面。

📷 图 1：新建卡片界面

三、添加运行变量

进入左侧：

复制代码

变量 → 添加变量

依次添加以下变量。

3.1 添加 greeting_title

复制代码

变量名称：greeting_title
变量类型：String
默认值：马年新春贺词
变量描述：贺词标题
绑定运行数据：开启

3.2 添加 greeting_content

复制代码

变量名称：greeting_content
变量类型：String
默认值：朋友，值此马年新春之际，愿你如奔腾的骏马，迎接瑞气与好运。
变量描述：贺词正文内容
绑定运行数据：开启

3.3 添加 short_blessing

复制代码

变量名称：short_blessing
变量类型：String
默认值：马到成功，新春快乐！
变量描述：强调祝福语
绑定运行数据：开启

3.4 添加 horse_idioms

复制代码

变量名称：horse_idioms
变量类型：String
默认值：龙马精神，奔腾骏马
变量描述：马年相关成语
绑定运行数据：开启

完成后变量列表应显示 4 个 String 类型变量。

📷 图 2：变量列表界面

四、整体结构搭建

卡片结构如下：

复制代码

Root
 └── 纵向容器（主背景）
      ├── 横向容器（标题区）
      ├── 纵向容器（正文区）
      ├── 横向容器（强调区）
      └── 横向容器（成语区）

📷 图 3：结构树界面

五、主背景容器配置

添加纵向容器：

yaml 复制代码

背景色: #e9e2d0
内边距: 20
圆角: 24

六、标题区域（横向容器）

添加横向容器：

yaml 复制代码

下外边距: 16
对齐方式: 居中

内部添加两个文本组件。

固定图标：

yaml 复制代码

文本内容: "🧧"
字重: 700
字体大小: 22
文字颜色: #b45309
右外边距: 8

变量文本：

yaml 复制代码

文本内容: "{{greeting_title}}"
字重: 700
字体大小: 22
文字颜色: #b45309

📷 图 4：标题区域配置界面

七、正文区域（纵向容器）

添加纵向容器：

yaml 复制代码

背景色: #f0f0f0
内边距: 20
下外边距: 20
圆角: 24

内部文本组件：

yaml 复制代码

文本内容: "{{greeting_content}}"
字重: 400
字体大小: 16
文字颜色: #2f3a4a

八、强调祝福区域（横向容器）

添加横向容器：

yaml 复制代码

背景色: #e62323
内边距: 20
下外边距: 20
圆角: 24
对齐方式: 居中

内部添加：

固定图标：

yaml 复制代码

文本内容: "💬"
字重: 600
字体大小: 18
文字颜色: #ffffff
右外边距: 8

变量文本：

yaml 复制代码

文本内容: "{{short_blessing}}"
字重: 600
字体大小: 18
文字颜色: #ffffff

九、成语区域（横向容器）

添加横向容器：

yaml 复制代码

对齐方式: 居中

内部添加：

固定图标：

yaml 复制代码

文本内容: "🐎"
字重: 500
字体大小: 18
文字颜色: #b87300
右外边距: 8

变量文本：

yaml 复制代码

文本内容: "{{horse_idioms}}"
字重: 500
字体大小: 18
文字颜色: #b87300

十、卡片预览测试

点击预览，检查：

标题是否显示
正文是否完整
强调区域是否突出
成语是否展示
各区块间距是否合理
布局无错位

📷 图 5：卡片预览效果界面

十一、本篇完成内容

创建贺词展示卡片
添加 4 个运行变量
使用横向容器组合固定文本与变量
完成情绪型排版结构
验证完整渲染效果

贺词展示卡片开发完成。