鸿蒙特效教程06-可拖拽网格实现教程

侧面

鸿蒙特效教程06-可拖拽网格实现教程

本教程适合 HarmonyOS Next 初学者，通过简单到复杂的步骤，一步步实现类似桌面APP中的可拖拽编辑效果。

效果预览

我们要实现的效果是一个 Grid 网格布局，用户可以通过长按并拖动来调整应用图标的位置顺序。拖拽完成后，底部会显示当前的排序结果。

实现步骤

步骤一：创建基本结构和数据模型

首先，我们需要创建一个基本的页面结构和数据模型。我们将定义一个应用名称数组和一个对应的颜色数组。

1. @Entry
2. @Component
3. struct DragGrid {
4.   // 应用名称数组
5.   @State apps: string[] = [
6.     '微信', '支付宝', 'QQ', '抖音',
7.     '快手', '微博', '头条', '网易云'
8.   ];
10.   build() {
11.     Column() {
12.       // 这里将放置我们的应用网格
13.       Text('应用网格示例')
14.         .fontSize(20)
15.         .fontColor(Color.White)
16.     }
17.     .width('100%')
18.     .height('100%')
19.     .backgroundColor('#121212')
20.   }
21. }

复制代码

这个基本结构包含一个应用名称数组和一个简单的Column容器。在这个阶段，我们只是显示一个标题文本。
步骤二：使用Grid布局展示应用图标

接下来，我们将使用Grid组件来创建网格布局，并使用ForEach遍历应用数组，为每个应用创建一个网格项。

1. @Entry
2. @Component
3. struct DragGrid {
4.   @State apps: string[] = [
5.     '微信', '支付宝', 'QQ', '抖音',
6.     '快手', '微博', '头条', '网易云'
7.   ];
9.   build() {
10.     Column() {
11.       // 使用Grid组件创建网格布局
12.       Grid() {
13.         ForEach(this.apps, (item: string) => {
14.           GridItem() {
15.             Column() {
16.               // 应用图标（暂用占位图）
17.               Image($r('app.media.startIcon'))
18.                 .width(60)
19.                 .aspectRatio(1)
21.               // 应用名称
22.               Text(item)
23.                 .fontSize(12)
24.                 .fontColor(Color.White)
25.             }
26.             .padding(10)
27.           }
28.         })
29.       }
30.       .columnsTemplate('1fr 1fr 1fr 1fr') // 4列等宽布局
31.       .rowsGap(10) // 行间距
32.       .columnsGap(10) // 列间距
33.       .padding(20) // 内边距
34.     }
35.     .width('100%')
36.     .height('100%')
37.     .backgroundColor('#121212')
38.   }
39. }

复制代码

在这一步，我们添加了Grid组件，它具有以下关键属性：

columnsTemplate：定义网格的列模板，'1fr 1fr 1fr 1fr'表示四列等宽布局。rowsGap：行间距，设置为10。columnsGap：列间距，设置为10。padding：内边距，设置为20。

每个GridItem包含一个Column布局，里面有一个Image(应用图标)和一个Text(应用名称)。
步骤三：优化图标布局和样式

现在我们有了基本的网格布局，接下来优化图标的样式和布局。我们将创建一个自定义的Builder函数来构建每个应用图标项，并添加一些颜色来区分不同应用。

1. @Entry
2. @Component
3. struct DragGrid {
4.   @State apps: string[] = [
5.     '微信', '支付宝', 'QQ', '抖音',
6.     '快手', '微博', '头条', '网易云',
7.     '腾讯视频', '爱奇艺', '优酷', 'B站'
8.   ];
10.   // 定义应用图标颜色
11.   private appColors: string[] = [
12.     '#34C759', '#007AFF', '#5856D6', '#FF2D55',
13.     '#FF9500', '#FF3B30', '#E73C39', '#D33A31',
14.     '#38B0DE', '#39A5DC', '#22C8BD', '#00A1D6'
15.   ];
17.   // 创建应用图标项的构建器
18.   @Builder
19.   itemBuilder(name: string, index: number) {
20.     Column({ space: 2 }) {
21.       // 应用图标
22.       Image($r('app.media.startIcon'))
23.         .width(80)
24.         .padding(10)
25.         .aspectRatio(1)
26.         .backgroundColor(this.appColors[index % this.appColors.length])
27.         .borderRadius(16)
29.       // 应用名称
30.       Text(name)
31.         .fontSize(12)
32.         .fontColor(Color.White)
33.     }
34.   }
36.   build() {
37.     Column() {
38.       Grid() {
39.         ForEach(this.apps, (item: string, index: number) => {
40.           GridItem() {
41.             this.itemBuilder(item, index)
42.           }
43.         })
44.       }
45.       .columnsTemplate('1fr 1fr 1fr 1fr')
46.       .rowsGap(20)
47.       .columnsGap(20)
48.       .padding(20)
49.     }
50.     .width('100%')
51.     .height('100%')
52.     .backgroundColor('#121212')
53.   }
54. }

复制代码

在这一步，我们：

添加了 appColors数组，定义了各个应用图标的背景颜色。创建了 @Builder itemBuilder函数，用于构建每个应用图标项，使代码更加模块化。为图标添加了背景颜色和圆角边框，使其更加美观。在ForEach中添加了index参数，用于获取当前项的索引，以便为不同应用使用不同的颜色。

步骤四：添加拖拽功能

现在我们有了美观的网格布局，下一步是添加拖拽功能。我们需要设置Grid的 editMode属性为true，并添加相应的拖拽事件处理函数。

1. @Entry
2. @Component
3. struct DragGrid {
4.   @State apps: string[] = [
5.     '微信', '支付宝', 'QQ', '抖音',
6.     '快手', '微博', '头条', '网易云',
7.     '腾讯视频', '爱奇艺', '优酷', 'B站'
8.   ];
10.   private appColors: string[] = [
11.     '#34C759', '#007AFF', '#5856D6', '#FF2D55',
12.     '#FF9500', '#FF3B30', '#E73C39', '#D33A31',
13.     '#38B0DE', '#39A5DC', '#22C8BD', '#00A1D6'
14.   ];
16.   @Builder
17.   itemBuilder(name: string) {
18.     Column({ space: 2 }) {
19.       Image($r('app.media.startIcon'))
20.         .draggable(false) // 禁止图片本身被拖拽
21.         .width(80)
22.         .padding(10)
23.         .aspectRatio(1)
25.       Text(name)
26.         .fontSize(12)
27.         .fontColor(Color.White)
28.     }
29.   }
31.   // 交换两个应用的位置
32.   changeIndex(a: number, b: number) {
33.     let temp = this.apps[a];
34.     this.apps[a] = this.apps[b];
35.     this.apps[b] = temp;
36.   }
38.   build() {
39.     Column() {
40.       Grid() {
41.         ForEach(this.apps, (item: string) => {
42.           GridItem() {
43.             this.itemBuilder(item)
44.           }
45.         })
46.       }
47.       .columnsTemplate('1fr 1fr 1fr 1fr')
48.       .rowsGap(20)
49.       .columnsGap(20)
50.       .padding(20)
51.       .supportAnimation(true) // 启用动画
52.       .editMode(true) // 启用编辑模式
53.       // 拖拽开始事件
54.       .onItemDragStart((_event: ItemDragInfo, itemIndex: number) => {
55.         return this.itemBuilder(this.apps[itemIndex]);
56.       })
57.       // 拖拽放置事件
58.       .onItemDrop((_event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => {
59.         if (!isSuccess || insertIndex >= this.apps.length) {
60.           return;
61.         }
62.         this.changeIndex(itemIndex, insertIndex);
63.       })
64.       .layoutWeight(1)
65.     }
66.     .width('100%')
67.     .height('100%')
68.     .backgroundColor('#121212')
69.   }
70. }

复制代码

在这一步，我们添加了拖拽功能的关键部分：

设置 supportAnimation(true)来启用动画效果。设置 editMode(true)来启用编辑模式，这是实现拖拽功能的必要设置。添加 onItemDragStart事件处理函数，当用户开始拖拽时触发，返回被拖拽项的UI表示。添加 onItemDrop事件处理函数，当用户放置拖拽项时触发，处理位置交换逻辑。创建 changeIndex方法，用于交换数组中两个元素的位置。在Image上设置 draggable(false)，确保是整个GridItem被拖拽，而不是图片本身。

步骤五：添加排序结果展示

为了让用户更直观地看到排序结果，我们在网格下方添加一个区域，用于显示当前的应用排序结果。

1. @Entry
2. @Component
3. struct DragGrid {
4.   // 前面的代码保持不变...
6.   build() {
7.     Column() {
8.       // 应用网格部分保持不变...
10.       // 添加排序结果展示区域
11.       Column({ space: 10 }) {
12.         Text('应用排序结果')
13.           .fontSize(16)
14.           .fontColor(Color.White)
16.         Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.Center }) {
17.           ForEach(this.apps, (item: string, index: number) => {
18.             Text(item)
19.               .fontSize(12)
20.               .fontColor(Color.White)
21.               .backgroundColor(this.appColors[index % this.appColors.length])
22.               .borderRadius(12)
23.               .padding({
24.                 left: 10,
25.                 right: 10,
26.                 top: 4,
27.                 bottom: 4
28.               })
29.               .margin(4)
30.           })
31.         }
32.         .width('100%')
33.       }
34.       .width('100%')
35.       .padding(10)
36.       .backgroundColor('#0DFFFFFF') // 半透明背景
37.       .borderRadius({ topLeft: 20, topRight: 20 }) // 上方圆角
38.     }
39.     .width('100%')
40.     .height('100%')
41.     .backgroundColor('#121212')
42.   }
43. }

复制代码

在这一步，我们添加了一个展示排序结果的区域：

使用Column容器，顶部显示"应用排序结果"的标题。使用Flex布局，设置 wrap: FlexWrap.Wrap允许内容换行，justifyContent: FlexAlign.Center使内容居中对齐。使用ForEach循环遍历应用数组，为每个应用创建一个带有背景色的文本标签。为结果区域添加半透明背景和上方圆角，使其更加美观。

步骤六：美化界面

最后，我们美化整个界面，添加渐变背景和一些视觉改进。

1. @Entry
2. @Component
3. struct DragGrid {
4.   // 前面的代码保持不变...
6.   build() {
7.     Column() {
8.       // 网格和结果区域代码保持不变...
9.     }
10.     .width('100%')
11.     .height('100%')
12.     .expandSafeArea() // 扩展到安全区域
13.     .linearGradient({ // 渐变背景
14.       angle: 135,
15.       colors: [
16.         ['#121212', 0],
17.         ['#242424', 1]
18.       ]
19.     })
20.   }
21. }

复制代码

在这一步，我们：

添加 expandSafeArea()确保内容可以扩展到设备的安全区域。使用 linearGradient创建渐变背景，角度为135度，从深色(#121212)渐变到稍浅的色调(#242424)。

完整代码

以下是完整的实现代码：

1. @Entry
2. @Component
3. struct DragGrid {
4.   // 应用名称数组，用于显示和排序
5.   @State apps: string[] = [
6.     '微信', '支付宝', 'QQ', '抖音',
7.     '快手', '微博', '头条', '网易云',
8.     '腾讯视频', '爱奇艺', '优酷', 'B站',
9.     '小红书', '美团', '饿了么', '滴滴',
10.     '高德', '携程'
11.   ];
13.   // 定义应用图标对应的颜色数组
14.   private appColors: string[] = [
15.     '#34C759', '#007AFF', '#5856D6', '#FF2D55',
16.     '#FF9500', '#FF3B30', '#E73C39', '#D33A31',
17.     '#38B0DE', '#39A5DC', '#22C8BD', '#00A1D6',
18.     '#FF3A31', '#FFD800', '#4290F7', '#FF7700',
19.     '#4AB66B', '#2A9AF1'
20.   ];
22.   /**
23.    * 构建单个应用图标项
24.    * @param name 应用名称
25.    * @return 返回应用图标的UI组件
26.    */
27.   @Builder
28.   itemBuilder(name: string) {
29.     // 垂直布局，包含图标和文字
30.     Column({ space: 2 }) {
31.       // 应用图标图片
32.       Image($r('app.media.startIcon'))
33.         .draggable(false)// 禁止图片本身被拖拽，确保整个GridItem被拖拽
34.         .width(80)
35.         .aspectRatio(1)// 保持1:1的宽高比
36.         .padding(10)
38.       // 应用名称文本
39.       Text(name)
40.         .fontSize(12)
41.         .fontColor(Color.White)
42.     }
43.   }
45.   /**
46.    * 交换两个应用在数组中的位置
47.    * @param a 第一个索引
48.    * @param b 第二个索引
49.    */
50.   changeIndex(a: number, b: number) {
51.     // 使用临时变量交换两个元素位置
52.     let temp = this.apps[a];
53.     this.apps[a] = this.apps[b];
54.     this.apps[b] = temp;
55.   }
57.   /**
58.    * 构建组件的UI结构
59.    */
60.   build() {
61.     // 主容器，垂直布局
62.     Column() {
63.       // 应用网格区域
64.       Grid() {
65.         // 遍历所有应用，为每个应用创建一个网格项
66.         ForEach(this.apps, (item: string) => {
67.           GridItem() {
68.             // 使用自定义builder构建网格项内容
69.             this.itemBuilder(item)
70.           }
71.         })
72.       }
73.       // 网格样式和行为设置
74.       .columnsTemplate('1fr '.repeat(4)) // 设置4列等宽布局
75.       .columnsGap(20) // 列间距
76.       .rowsGap(20) // 行间距
77.       .padding(20) // 内边距
78.       .supportAnimation(true) // 启用动画支持
79.       .editMode(true) // 启用编辑模式，允许拖拽
80.       // 拖拽开始事件处理
81.       .onItemDragStart((_event: ItemDragInfo, itemIndex: number) => {
82.         // 返回被拖拽项的UI
83.         return this.itemBuilder(this.apps[itemIndex]);
84.       })
85.       // 拖拽放置事件处理
86.       .onItemDrop((_event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => {
87.         // 如果拖拽失败或目标位置无效，则不执行操作
88.         if (!isSuccess || insertIndex >= this.apps.length) {
89.           return;
90.         }
91.         // 交换元素位置
92.         this.changeIndex(itemIndex, insertIndex);
93.       })
94.       .layoutWeight(1) // 使网格区域占用剩余空间
96.       // 结果显示区域
97.       Column({ space: 10 }) {
98.         // 标题文本
99.         Text('应用排序结果')
100.           .fontSize(16)
101.           .fontColor(Color.White)
103.         // 弹性布局，允许换行
104.         Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.Center }) {
105.           // 遍历应用数组，为每个应用创建一个彩色标签
106.           ForEach(this.apps, (item: string, index: number) => {
107.             Text(item)
108.               .fontSize(12)
109.               .fontColor(Color.White)
110.               .backgroundColor(this.appColors[index % this.appColors.length])
111.               .borderRadius(12)
112.               .padding({
113.                 left: 10,
114.                 right: 10,
115.                 top: 4,
116.                 bottom: 4
117.               })
118.               .margin(4)
119.           })
120.         }
121.         .width('100%')
122.       }
123.       .width('100%')
124.       .padding(10) // 内边距
125.       .backgroundColor('#0DFFFFFF') // 半透明背景
126.       .expandSafeArea() // 扩展到安全区域
127.       .borderRadius({ topLeft: 20, topRight: 20 }) // 上左右圆角
128.     }
129.     // 主容器样式设置
130.     .width('100%')
131.     .height('100%')
132.     .expandSafeArea() // 扩展到安全区域
133.     .linearGradient({
134.       angle: 135, // 渐变角度
135.       colors: [
136.         ['#121212', 0], // 起点色
137.         ['#242424', 1] // 终点色
138.       ]
139.     })
140.   }
141. }

复制代码

Grid组件的关键属性详解

Grid是鸿蒙系统中用于创建网格布局的重要组件，它有以下关键属性：

columnsTemplate: 定义网格的列模板。例如 '1fr 1fr 1fr 1fr'表示四列等宽布局。'1fr'中的'fr'是fraction(分数)的缩写，表示按比例分配空间。rowsTemplate: 定义网格的行模板。如果不设置，行高将根据内容自动调整。columnsGap: 列之间的间距。rowsGap: 行之间的间距。editMode: 是否启用编辑模式。设置为true时启用拖拽功能。supportAnimation: 是否支持动画。设置为true时，拖拽过程中会有平滑的动画效果。

拖拽功能的关键事件详解

实现拖拽功能主要依赖以下事件：

onItemDragStart: 当用户开始拖拽某个项时触发。

参数：event(拖拽事件信息)，itemIndex(被拖拽项的索引)返回值：被拖拽项的UI表示

onItemDrop: 当用户放置拖拽项时触发。

参数：event(拖拽事件信息)，itemIndex(原始位置索引)，insertIndex(目标位置索引)，isSuccess(是否成功)功能：处理元素位置交换逻辑

此外，还有一些可选的事件可以用于增强拖拽体验：

onItemDragEnter: 当拖拽项进入某个位置时触发。onItemDragMove: 当拖拽项在网格中移动时触发。onItemDragLeave: 当拖拽项离开某个位置时触发。

小结与进阶提示

通过本教程，我们实现了一个功能完整的可拖拽应用网格界面。主要学习了以下内容：

使用Grid组件创建网格布局使用@Builder创建可复用的UI构建函数实现拖拽排序功能优化UI和用户体验

进阶提示：

可以添加长按震动反馈，增强交互体验。可以实现数据持久化，保存用户的排序结果。可以添加编辑模式切换，只有在特定模式下才允许拖拽排序。可以为拖拽过程添加更丰富的动画效果，如缩放、阴影等。

希望本教程对你有所帮助，让你掌握鸿蒙系统中Grid组件和拖拽功能的使用方法！