鸿蒙特效教程10-卡片展开/收起效果

allyescc

鸿蒙特效教程10-卡片展开/收起效果

在移动应用开发中，卡片是一种常见且实用的UI元素，能够将信息以紧凑且易于理解的方式呈现给用户。
本教程将详细讲解如何在HarmonyOS中实现卡片的展开/收起效果，通过这个实例，你将掌握ArkUI中状态管理和动画实现的核心技巧。
一、实现效果预览

我们将实现一个包含多个卡片的页面，整个交互过程都有平滑的动画效果。

每个卡片默认只显示标题，点击右侧箭头按钮后可以展开显示详细内容，再次点击则收起。实现"全部展开"和"全部收起"的功能按钮。

二、实现步骤

步骤1：创建基础页面结构

首先，我们需要创建一个基本的页面结构，包含一个标题和一个简单的卡片：

1. @Entry
2. @Component
3. struct ToggleCard {
4.   build() {
5.     Column() {
6.       Text('卡片展开/收起示例')
7.         .fontSize(22)
8.         .fontWeight(FontWeight.Bold)
9.         .margin({ top: 20 })
11.       // 一个简单的卡片
12.       Column() {
13.         Text('个人信息')
14.           .fontSize(16)
15.           .fontWeight(FontWeight.Medium)
16.       }
17.       .width('90%')
18.       .padding(16)
19.       .backgroundColor('#ECF2FF')
20.       .borderRadius(12)
21.       .margin({ top: 20 })
22.     }
23.     .width('100%')
24.     .height('100%')
25.     .backgroundColor('#F5F5F5')
26.     .alignItems(HorizontalAlign.Center)
27.     .expandSafeArea()
28.   }
29. }

复制代码

这段代码创建了一个基本的页面，顶部有一个标题，下方有一个简单的卡片，卡片只包含一个标题文本。
步骤2：添加卡片标题行和展开按钮

接下来，我们为卡片添加一个标题行，并在右侧添加一个展开/收起按钮：

1. @Entry
2. @Component
3. struct ToggleCard {
4.   build() {
5.     Column() {
6.       Text('卡片展开/收起示例')
7.         .fontSize(22)
8.         .fontWeight(FontWeight.Bold)
9.         .margin({ top: 20 })
11.       // 一个带展开按钮的卡片
12.       Column() {
13.         Row() {
14.           Text('个人信息')
15.             .fontSize(16)
16.             .fontWeight(FontWeight.Medium)
18.           Blank()  // 占位，使按钮靠右显示
20.           Button() {
21.             Image($r('sys.media.ohos_ic_public_arrow_down'))
22.               .width(24)
23.               .height(24)
24.               .fillColor('#3F72AF')
25.           }
26.           .width(36)
27.           .height(36)
28.           .backgroundColor(Color.Transparent)
29.         }
30.         .width('100%')
31.         .justifyContent(FlexAlign.SpaceBetween)
32.         .alignItems(VerticalAlign.Center)
33.       }
34.       .width('90%')
35.       .padding(16)
36.       .backgroundColor('#ECF2FF')
37.       .borderRadius(12)
38.       .margin({ top: 20 })
39.     }
40.     .width('100%')
41.     .height('100%')
42.     .backgroundColor('#F5F5F5')
43.     .alignItems(HorizontalAlign.Center)
44.     .expandSafeArea()
45.   }
46. }

复制代码

现在我们的卡片有了标题和一个展开按钮，但点击按钮还没有任何效果。接下来我们将添加状态管理和交互逻辑。
步骤3：添加状态变量控制卡片展开/收起

要实现卡片的展开/收起效果，我们需要添加一个状态变量来跟踪卡片是否处于展开状态：

1. @Entry
2. @Component
3. struct ToggleCard {
4.   @State isExpanded: boolean = false  // 控制卡片展开/收起状态
6.   build() {
7.     Column() {
8.       Text('卡片展开/收起示例')
9.         .fontSize(22)
10.         .fontWeight(FontWeight.Bold)
11.         .margin({ top: 20 })
13.       // 一个带展开按钮的卡片
14.       Column() {
15.         Row() {
16.           Text('个人信息')
17.             .fontSize(16)
18.             .fontWeight(FontWeight.Medium)
20.           Blank()
22.           Button() {
23.             Image($r('sys.media.ohos_ic_public_arrow_down'))
24.               .width(24)
25.               .height(24)
26.               .fillColor('#3F72AF')
27.           }
28.           .width(36)
29.           .height(36)
30.           .backgroundColor(Color.Transparent)
31.           .onClick(() => {
32.             this.isExpanded = !this.isExpanded  // 点击按钮切换状态
33.           })
34.         }
35.         .width('100%')
36.         .justifyContent(FlexAlign.SpaceBetween)
37.         .alignItems(VerticalAlign.Center)
39.         // 根据展开状态条件渲染内容
40.         if (this.isExpanded) {
41.           Text('这是展开后显示的内容，包含详细信息。')
42.             .fontSize(14)
43.             .margin({ top: 8 })
44.         }
45.       }
46.       .width('90%')
47.       .padding(16)
48.       .backgroundColor('#ECF2FF')
49.       .borderRadius(12)
50.       .margin({ top: 20 })
51.     }
52.     .width('100%')
53.     .height('100%')
54.     .backgroundColor('#F5F5F5')
55.     .alignItems(HorizontalAlign.Center)
56.     .expandSafeArea()
57.   }
58. }

复制代码

现在我们添加了一个 @State状态变量 isExpanded，并在按钮的 onClick事件中切换它的值。同时，我们使用 if条件语句根据 isExpanded的值决定是否显示卡片的详细内容。
步骤4：添加基本动画效果

接下来，我们将为卡片的展开/收起添加动画效果，让交互更加流畅自然。HarmonyOS提供了两种主要的动画实现方式：

animation属性：直接应用于组件的声明式动画animateTo函数：通过改变状态触发的命令式动画

首先，我们使用这两种方式来实现箭头旋转和内容展开的动画效果：

1. @Entry
2. @Component
3. struct ToggleCard {
4.   @State isExpanded: boolean = false
6.   // 切换卡片展开/收起状态
7.   toggleCard() {
8.     // 使用animateTo实现状态变化的动画
9.     animateTo({
10.       duration: 300,  // 动画持续时间(毫秒)
11.       curve: Curve.EaseOut,  // 缓动曲线
12.       onFinish: () => {
13.         console.info('卡片动画完成')  // 动画完成回调
14.       }
15.     }, () => {
16.       this.isExpanded = !this.isExpanded  // 在动画函数中切换状态
17.     })
18.   }
20.   build() {
21.     Column() {
22.       Text('卡片展开/收起示例')
23.         .fontSize(22)
24.         .fontWeight(FontWeight.Bold)
25.         .margin({ top: 20 })
27.       // 带动画效果的卡片
28.       Column() {
29.         Row() {
30.           Text('个人信息')
31.             .fontSize(16)
32.             .fontWeight(FontWeight.Medium)
34.           Blank()
36.           Button() {
37.             Image($r('sys.media.ohos_ic_public_arrow_down'))
38.               .width(24)
39.               .height(24)
40.               .fillColor('#3F72AF')
41.               .rotate({ angle: this.isExpanded ? 180 : 0 })  // 根据状态控制旋转角度
42.               .animation({  // 为旋转添加动画效果
43.                 duration: 300,
44.                 curve: Curve.FastOutSlowIn
45.               })
46.           }
47.           .width(36)
48.           .height(36)
49.           .backgroundColor(Color.Transparent)
50.           .onClick(() => this.toggleCard())  // 调用切换函数
51.         }
52.         .width('100%')
53.         .justifyContent(FlexAlign.SpaceBetween)
54.         .alignItems(VerticalAlign.Center)
56.         if (this.isExpanded) {
57.           Column() {
58.             Text('这是展开后显示的内容，包含详细信息。')
59.               .fontSize(14)
60.               .layoutWeight(1)
61.           }
62.           .animation({  // 为内容添加动画效果
63.             duration: 300,
64.             curve: Curve.EaseOut
65.           })
66.           .height(80)  // 固定高度便于观察动画效果
67.           .width('100%')
68.         }
69.       }
70.       .width('90%')
71.       .padding(16)
72.       .backgroundColor('#ECF2FF')
73.       .borderRadius(12)
74.       .margin({ top: 20 })
75.     }
76.     .width('100%')
77.     .height('100%')
78.     .backgroundColor('#F5F5F5')
79.     .alignItems(HorizontalAlign.Center)
80.     .expandSafeArea()
81.   }
82. }

复制代码

在这个版本中，我们添加了两种动画实现：

使用 animateTo函数来实现状态变化时的动画效果使用 .animation()属性为箭头旋转和内容展示添加过渡动画

这两种动画方式的区别：

animation属性：简单直接，适用于属性变化的过渡动画animateTo函数：更灵活，可以一次性动画多个状态变化，有完成回调

步骤5：扩展为多卡片结构

现在让我们扩展代码，实现多个可独立展开/收起的卡片：

1. // 定义卡片数据接口
2. interface CardInfo {
3.   title: string
4.   content: string
5.   color: string
6. }
8. @Entry
9. @Component
10. struct ToggleCard {
11.   // 使用数组管理多个卡片的展开状态
12.   @State cardsExpanded: boolean[] = [false, false, false]
14.   // 卡片数据
15.   private cardsData: CardInfo[] = [
16.     {
17.       title: '个人信息',
18.       content: '这是个人信息卡片的内容区域，可以放置用户的基本信息，如姓名、年龄、电话等。',
19.       color: '#ECF2FF'
20.     },
21.     {
22.       title: '支付设置',
23.       content: '这是支付设置卡片的内容区域，可以放置用户的支付相关信息，包括支付方式、银行卡等信息。',
24.       color: '#E7F5EF'
25.     },
26.     {
27.       title: '隐私设置',
28.       content: '这是隐私设置卡片的内容区域，可以放置隐私相关的设置选项，如账号安全、数据权限等内容。',
29.       color: '#FFF1E6'
30.     }
31.   ]
33.   // 切换指定卡片的展开/收起状态
34.   toggleCard(index: number) {
35.     animateTo({
36.       duration: 300,
37.       curve: Curve.EaseOut,
38.       onFinish: () => {
39.         console.info(`卡片${index}动画完成`)
40.       }
41.     }, () => {
42.       // 创建新数组并更新特定索引的值
43.       let newExpandedState = [...this.cardsExpanded]
44.       newExpandedState[index] = !newExpandedState[index]
45.       this.cardsExpanded = newExpandedState
46.     })
47.   }
49.   build() {
50.     Column() {
51.       Text('多卡片展开/收起示例')
52.         .fontSize(22)
53.         .fontWeight(FontWeight.Bold)
54.         .margin({ top: 20 })
56.       // 使用ForEach遍历卡片数据，创建多个卡片
57.       ForEach(this.cardsData, (card: CardInfo, index: number) => {
58.         // 卡片组件
59.         Column() {
60.           Row() {
61.             Text(card.title)
62.               .fontSize(16)
63.               .fontWeight(FontWeight.Medium)
65.             Blank()
67.             Button() {
68.               Image($r('sys.media.ohos_ic_public_arrow_down'))
69.                 .width(24)
70.                 .height(24)
71.                 .fillColor('#3F72AF')
72.                 .rotate({ angle: this.cardsExpanded[index] ? 180 : 0 })
73.                 .animation({
74.                   duration: 300,
75.                   curve: Curve.FastOutSlowIn
76.                 })
77.             }
78.             .width(36)
79.             .height(36)
80.             .backgroundColor(Color.Transparent)
81.             .onClick(() => this.toggleCard(index))
82.           }
83.           .width('100%')
84.           .justifyContent(FlexAlign.SpaceBetween)
85.           .alignItems(VerticalAlign.Center)
87.           if (this.cardsExpanded[index]) {
88.             Column() {
89.               Text(card.content)
90.                 .fontSize(14)
91.                 .layoutWeight(1)
92.             }
93.             .animation({
94.               duration: 300,
95.               curve: Curve.EaseOut
96.             })
97.             .height(80)
98.             .width('100%')
99.           }
100.         }
101.         .padding(16)
102.         .borderRadius(12)
103.         .backgroundColor(card.color)
104.         .width('90%')
105.         .margin({ top: 16 })
106.       })
107.     }
108.     .width('100%')
109.     .height('100%')
110.     .backgroundColor('#F5F5F5')
111.     .alignItems(HorizontalAlign.Center)
112.     .expandSafeArea()
113.   }
114. }

复制代码

在这个版本中，我们添加了以下改进：

使用 interface定义卡片数据结构创建卡片数据数组和对应的展开状态数组使用 ForEach循环创建多个卡片修改 toggleCard函数接受索引参数，只切换特定卡片的状态

步骤6：添加滚动容器和全局控制按钮

最后，我们添加滚动容器和全局控制按钮，完善整个页面功能：

1. // 定义卡片数据接口
2. interface CardInfo {
3.   title: string
4.   content: string
5.   color: string
6. }
8. @Entry
9. @Component
10. struct ToggleCard {
11.   // 使用数组管理多个卡片的展开状态
12.   @State cardsExpanded: boolean[] = [false, false, false, false]
14.   // 卡片数据
15.   @State cardsData: CardInfo[] = [
16.     {
17.       title: '个人信息',
18.       content: '这是个人信息卡片的内容区域，可以放置用户的基本信息，如姓名、年龄、电话等。点击上方按钮可以收起卡片。',
19.       color: '#ECF2FF'
20.     },
21.     {
22.       title: '支付设置',
23.       content: '这是支付设置卡片的内容区域，可以放置用户的支付相关信息，包括支付方式、银行卡等信息。点击上方按钮可以收起卡片。',
24.       color: '#E7F5EF'
25.     },
26.     {
27.       title: '隐私设置',
28.       content: '这是隐私设置卡片的内容区域，可以放置隐私相关的设置选项，如账号安全、数据权限等内容。点击上方按钮可以收起卡片。',
29.       color: '#FFF1E6'
30.     },
31.     {
32.       title: '关于系统',
33.       content: '这是关于系统卡片的内容区域，包含系统版本、更新状态、法律信息等内容。点击上方按钮可以收起卡片。',
34.       color: '#F5EDFF'
35.     }
36.   ]
38.   // 切换指定卡片的展开/收起状态
39.   toggleCard(index: number) {
40.     animateTo({
41.       duration: 300,
42.       curve: Curve.EaseOut,
43.       onFinish: () => {
44.         console.info(`卡片${index}动画完成`)
45.       }
46.     }, () => {
47.       // 创建新数组并更新特定索引的值
48.       let newExpandedState = [...this.cardsExpanded]
49.       newExpandedState[index] = !newExpandedState[index]
50.       this.cardsExpanded = newExpandedState
51.     })
52.   }
54.   build() {
55.     Column({ space: 20 }) {
56.       Text('多卡片展开/收起示例')
57.         .fontSize(22)
58.         .fontWeight(FontWeight.Bold)
59.         .margin({ top: 20 })
61.       // 使用滚动容器，以便在内容较多时可以滚动查看
62.       Scroll() {
63.         Column({ space: 16 }) {
64.           // 使用ForEach遍历卡片数据，创建多个卡片
65.           ForEach(this.cardsData, (card: CardInfo, index: number) => {
66.             // 卡片组件
67.             Column() {
68.               Row() {
69.                 Text(card.title)
70.                   .fontSize(16)
71.                   .fontWeight(FontWeight.Medium)
73.                 Blank()
75.                 Button() {
76.                   Image($r('sys.media.ohos_ic_public_arrow_down'))
77.                     .width(24)
78.                     .height(24)
79.                     .fillColor('#3F72AF')
80.                     .rotate({ angle: this.cardsExpanded[index] ? 180 : 0 })
81.                     .animation({
82.                       duration: 300,
83.                       curve: Curve.FastOutSlowIn
84.                     })
85.                 }
86.                 .width(36)
87.                 .height(36)
88.                 .backgroundColor(Color.Transparent)
89.                 .onClick(() => this.toggleCard(index))
90.               }
91.               .width('100%')
92.               .justifyContent(FlexAlign.SpaceBetween)
93.               .alignItems(VerticalAlign.Center)
95.               if (this.cardsExpanded[index]) {
96.                 Column({ space: 8 }) {
97.                   Text(card.content)
98.                     .fontSize(14)
99.                     .layoutWeight(1)
100.                 }
101.                 .animation({
102.                   duration: 300,
103.                   curve: Curve.EaseOut
104.                 })
105.                 .height(100)
106.                 .width('100%')
107.               }
108.             }
109.             .padding(16)
110.             .borderRadius(12)
111.             .backgroundColor(card.color)
112.             .width('100%')
113.             // 添加阴影效果增强立体感
114.             .shadow({
115.               radius: 4,
116.               color: 'rgba(0, 0, 0, 0.1)',
117.               offsetX: 0,
118.               offsetY: 2
119.             })
120.           })
122.           // 底部间距
123.           Blank()
124.             .height(20)
125.         }
126.         .alignItems(HorizontalAlign.Center)
127.       }
128.       .align(Alignment.Top)
129.       .padding(20)
130.       .layoutWeight(1)
132.       // 添加底部按钮控制所有卡片
133.       Row({ space: 20 }) {
134.         Button('全部展开')
135.           .width('40%')
136.           .onClick(() => {
137.             animateTo({
138.               duration: 300
139.             }, () => {
140.               this.cardsExpanded = this.cardsData.map((_: CardInfo) => true)
141.             })
142.           })
144.         Button('全部收起')
145.           .width('40%')
146.           .onClick(() => {
147.             animateTo({
148.               duration: 300
149.             }, () => {
150.               this.cardsExpanded = this.cardsData.map((_: CardInfo) => false)
151.             })
152.           })
153.       }
154.       .margin({ bottom: 30 })
155.     }
156.     .width('100%')
157.     .height('100%')
158.     .backgroundColor('#F5F5F5')
159.     .alignItems(HorizontalAlign.Center)
160.     .expandSafeArea()
161.   }
162. }

复制代码

这个最终版本添加了以下功能：

使用 Scroll容器，允许内容超出屏幕时滚动查看添加"全部展开"和"全部收起"按钮，使用 map函数批量更新状态使用 space参数优化布局间距添加阴影效果增强卡片的立体感

三、关键技术点讲解

1. 状态管理

在HarmonyOS的ArkUI框架中，@State装饰器用于声明组件的状态变量。当状态变量改变时，UI会自动更新。在这个示例中：

对于单个卡片，我们使用 isExpanded布尔值跟踪其展开状态对于多个卡片，我们使用 cardsExpanded数组，数组中的每个元素对应一个卡片的状态

更新数组类型的状态时，需要创建一个新数组而不是直接修改原数组，这样框架才能检测到变化并更新UI：

1. let newExpandedState = [...this.cardsExpanded]  // 创建副本
2. newExpandedState[index] = !newExpandedState[index]  // 修改副本
3. this.cardsExpanded = newExpandedState  // 赋值给状态变量

复制代码

2. 动画实现

HarmonyOS提供了两种主要的动画实现方式：
A. animation属性（声明式动画）

直接应用于组件，当属性值变化时自动触发动画：

1. .rotate({ angle: this.isExpanded ? 180 : 0 })  // 属性根据状态变化
2. .animation({  // 动画配置
3.   duration: 300,  // 持续时间(毫秒)
4.   curve: Curve.FastOutSlowIn,  // 缓动曲线
5.   delay: 0,  // 延迟时间(毫秒)
6.   iterations: 1,  // 重复次数
7.   playMode: PlayMode.Normal  // 播放模式
8. })

复制代码

B. animateTo函数（命令式动画）

通过回调函数中改变状态值来触发动画：

1. animateTo({
2.   duration: 300,  // 持续时间
3.   curve: Curve.EaseOut,  // 缓动曲线
4.   onFinish: () => {  // 动画完成回调
5.     console.info('动画完成')
6.   }
7. }, () => {
8.   // 在这个函数中更改状态值，这些变化将以动画方式呈现
9.   this.isExpanded = !this.isExpanded
10. })

复制代码

3. 条件渲染

使用 if条件语句实现内容的动态显示：

1. if (this.cardsExpanded[index]) {
2.   Column() {
3.     // 这里的内容只在卡片展开时渲染
4.   }
5. }

复制代码

4. 数据驱动的UI

通过 ForEach循环根据数据动态创建UI元素：

1. ForEach(this.cardsData, (card: CardInfo, index: number) => {
2.   // 根据每个数据项创建卡片
3. })

复制代码

四、动画曲线详解

HarmonyOS提供了多种缓动曲线，可以实现不同的动画效果：

Curve.Linear：线性曲线，匀速动画Curve.EaseIn：缓入曲线，动画开始慢，结束快Curve.EaseOut：缓出曲线，动画开始快，结束慢Curve.EaseInOut：缓入缓出曲线，动画开始和结束都慢，中间快Curve.FastOutSlowIn：标准曲线，类似Android标准曲线Curve.LinearOutSlowIn：减速曲线Curve.FastOutLinearIn：加速曲线Curve.ExtremeDeceleration：急缓曲线Curve.Sharp：锐利曲线Curve.Rhythm：节奏曲线Curve.Smooth：平滑曲线Curve.Friction：摩擦曲线/阻尼曲线

在我们的示例中：

使用 Curve.FastOutSlowIn为箭头旋转提供更自然的视觉效果使用 Curve.EaseOut为内容展开提供平滑的过渡

五、常见问题与解决方案

动画不流畅：可能是因为在动画过程中执行了复杂操作。解决方法是将复杂计算从动画函数中移出，或者使用 onFinish回调在动画完成后执行。条件渲染内容闪烁：为条件渲染的内容添加 .animation()属性可以实现平滑过渡。卡片高度跳变：为卡片内容设置固定高度，或者使用更复杂的布局计算动态高度。多卡片状态管理复杂：使用数组管理多个状态，并记得创建数组副本而不是直接修改原数组。

六、扩展与优化

你可以进一步扩展这个效果：

自定义卡片内容：为每个卡片添加更丰富的内容，如表单、图表或列表记住展开状态：使用持久化存储记住用户的卡片展开偏好添加手势交互：支持滑动展开/收起卡片添加动态效果：比如展开时显示阴影或改变背景优化性能：对于非常多的卡片，可以实现虚拟列表或懒加载

七、总结

通过本教程，我们学习了如何在HarmonyOS中实现卡片展开/收起效果，掌握了ArkUI中状态管理和动画实现的核心技巧。关键技术点包括：

使用 @State管理组件状态使用 .animation()属性和 animateTo()函数实现动画使用条件渲染动态显示内容实现数据驱动的UI创建为多个卡片独立管理状态

这些技术不仅适用于卡片展开/收起效果，也是构建其他复杂交互界面的基础。
希望这篇 HarmonyOS Next 教程对你有所帮助，期待您的 👍点赞、💬评论、🌟收藏 支持。