AI 助理
备案控制台
开发者社区 通义灵码 AI编码助手 文章 正文

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

2025-03-26 164
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 本教程适合 HarmonyOS Next 初学者，通过简单到复杂的步骤，一步步实现类似桌面APP中的可拖拽编辑效果。

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

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

开发环境准备

  • DevEco Studio 5.0.3
  • HarmonyOS Next API 15

下载代码仓库

效果预览

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

特效06-可拖拽网格-效果.gif

实现步骤

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

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

@Entry
@Component
struct DragGrid {
   
  // 应用名称数组
  @State apps: string[] = [
    '微信', '支付宝', 'QQ', '抖音',
    '快手', '微博', '头条', '网易云'
  ];

  build() {
   
    Column() {
   
      // 这里将放置我们的应用网格
      Text('应用网格示例')
        .fontSize(20)
        .fontColor(Color.White)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#121212')
  }
}

这个基本结构包含一个应用名称数组和一个简单的Column容器。在这个阶段，我们只是显示一个标题文本。

步骤二：使用Grid布局展示应用图标

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

@Entry
@Component
struct DragGrid {
   
  @State apps: string[] = [
    '微信', '支付宝', 'QQ', '抖音',
    '快手', '微博', '头条', '网易云'
  ];

  build() {
   
    Column() {
   
      // 使用Grid组件创建网格布局
      Grid() {
   
        ForEach(this.apps, (item: string) => {
   
          GridItem() {
   
            Column() {
   
              // 应用图标（暂用占位图）
              Image($r('app.media.startIcon'))
                .width(60)
                .aspectRatio(1)

              // 应用名称
              Text(item)
                .fontSize(12)
                .fontColor(Color.White)
            }
            .padding(10)
          }
        })
      }
      .columnsTemplate('1fr 1fr 1fr 1fr') // 4列等宽布局
      .rowsGap(10) // 行间距
      .columnsGap(10) // 列间距
      .padding(20) // 内边距
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#121212')
  }
}

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

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

每个GridItem包含一个Column布局，里面有一个Image(应用图标)和一个Text(应用名称)。

步骤三：优化图标布局和样式

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

@Entry
@Component
struct DragGrid {
   
  @State apps: string[] = [
    '微信', '支付宝', 'QQ', '抖音',
    '快手', '微博', '头条', '网易云',
    '腾讯视频', '爱奇艺', '优酷', 'B站'
  ];

  // 定义应用图标颜色
  private appColors: string[] = [
    '#34C759', '#007AFF', '#5856D6', '#FF2D55',
    '#FF9500', '#FF3B30', '#E73C39', '#D33A31',
    '#38B0DE', '#39A5DC', '#22C8BD', '#00A1D6'
  ];

  // 创建应用图标项的构建器
  @Builder
  itemBuilder(name: string, index: number) {
   
    Column({
    space: 2 }) {
   
      // 应用图标
      Image($r('app.media.startIcon'))
        .width(80)
        .padding(10)
        .aspectRatio(1)
        .backgroundColor(this.appColors[index % this.appColors.length])
        .borderRadius(16)

      // 应用名称
      Text(name)
        .fontSize(12)
        .fontColor(Color.White)
    }
  }

  build() {
   
    Column() {
   
      Grid() {
   
        ForEach(this.apps, (item: string, index: number) => {
   
          GridItem() {
   
            this.itemBuilder(item, index)
          }
        })
      }
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .rowsGap(20)
      .columnsGap(20)
      .padding(20)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#121212')
  }
}

在这一步，我们：

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

步骤四：添加拖拽功能

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

@Entry
@Component
struct DragGrid {
   
  @State apps: string[] = [
    '微信', '支付宝', 'QQ', '抖音',
    '快手', '微博', '头条', '网易云',
    '腾讯视频', '爱奇艺', '优酷', 'B站'
  ];

  private appColors: string[] = [
    '#34C759', '#007AFF', '#5856D6', '#FF2D55',
    '#FF9500', '#FF3B30', '#E73C39', '#D33A31',
    '#38B0DE', '#39A5DC', '#22C8BD', '#00A1D6'
  ];

  @Builder
  itemBuilder(name: string) {
   
    Column({
    space: 2 }) {
   
      Image($r('app.media.startIcon'))
        .draggable(false) // 禁止图片本身被拖拽
        .width(80)
        .padding(10)
        .aspectRatio(1)

      Text(name)
        .fontSize(12)
        .fontColor(Color.White)
    }
  }

  // 交换两个应用的位置
  changeIndex(a: number, b: number) {
   
    let temp = this.apps[a];
    this.apps[a] = this.apps[b];
    this.apps[b] = temp;
  }

  build() {
   
    Column() {
   
      Grid() {
   
        ForEach(this.apps, (item: string) => {
   
          GridItem() {
   
            this.itemBuilder(item)
          }
        })
      }
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .rowsGap(20)
      .columnsGap(20)
      .padding(20)
      .supportAnimation(true) // 启用动画
      .editMode(true) // 启用编辑模式
      // 拖拽开始事件
      .onItemDragStart((_event: ItemDragInfo, itemIndex: number) => {
   
        return this.itemBuilder(this.apps[itemIndex]);
      })
      // 拖拽放置事件
      .onItemDrop((_event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => {
   
        if (!isSuccess || insertIndex >= this.apps.length) {
   
          return;
        }
        this.changeIndex(itemIndex, insertIndex);
      })
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#121212')
  }
}

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

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

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

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

@Entry
@Component
struct DragGrid {
   
  // 前面的代码保持不变...

  build() {
   
    Column() {
   
      // 应用网格部分保持不变...

      // 添加排序结果展示区域
      Column({
    space: 10 }) {
   
        Text('应用排序结果')
          .fontSize(16)
          .fontColor(Color.White)

        Flex({
    wrap: FlexWrap.Wrap, justifyContent: FlexAlign.Center }) {
   
          ForEach(this.apps, (item: string, index: number) => {
   
            Text(item)
              .fontSize(12)
              .fontColor(Color.White)
              .backgroundColor(this.appColors[index % this.appColors.length])
              .borderRadius(12)
              .padding({
   
                left: 10,
                right: 10,
                top: 4,
                bottom: 4
              })
              .margin(4)
          })
        }
        .width('100%')
      }
      .width('100%')
      .padding(10)
      .backgroundColor('#0DFFFFFF') // 半透明背景
      .borderRadius({
    topLeft: 20, topRight: 20 }) // 上方圆角
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#121212')
  }
}

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

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

步骤六：美化界面

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

@Entry
@Component
struct DragGrid {
   
  // 前面的代码保持不变...

  build() {
   
    Column() {
   
      // 网格和结果区域代码保持不变...
    }
    .width('100%')
    .height('100%')
    .expandSafeArea() // 扩展到安全区域
    .linearGradient({
    // 渐变背景
      angle: 135,
      colors: [
        ['#121212', 0],
        ['#242424', 1]
      ]
    })
  }
}

在这一步，我们：

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

完整代码

以下是完整的实现代码：

@Entry
@Component
struct DragGrid {
   
  // 应用名称数组，用于显示和排序
  @State apps: string[] = [
    '微信', '支付宝', 'QQ', '抖音',
    '快手', '微博', '头条', '网易云',
    '腾讯视频', '爱奇艺', '优酷', 'B站',
    '小红书', '美团', '饿了么', '滴滴',
    '高德', '携程'
  ];

  // 定义应用图标对应的颜色数组
  private appColors: string[] = [
    '#34C759', '#007AFF', '#5856D6', '#FF2D55',
    '#FF9500', '#FF3B30', '#E73C39', '#D33A31',
    '#38B0DE', '#39A5DC', '#22C8BD', '#00A1D6',
    '#FF3A31', '#FFD800', '#4290F7', '#FF7700',
    '#4AB66B', '#2A9AF1'
  ];

  /**
   * 构建单个应用图标项
   * @param name 应用名称
   * @return 返回应用图标的UI组件
   */
  @Builder
  itemBuilder(name: string) {
   
    // 垂直布局，包含图标和文字
    Column({
    space: 2 }) {
   
      // 应用图标图片
      Image($r('app.media.startIcon'))
        .draggable(false)// 禁止图片本身被拖拽，确保整个GridItem被拖拽
        .width(80)
        .aspectRatio(1)// 保持1:1的宽高比
        .padding(10)

      // 应用名称文本
      Text(name)
        .fontSize(12)
        .fontColor(Color.White)
    }
  }

  /**
   * 交换两个应用在数组中的位置
   * @param a 第一个索引
   * @param b 第二个索引
   */
  changeIndex(a: number, b: number) {
   
    // 使用临时变量交换两个元素位置
    let temp = this.apps[a];
    this.apps[a] = this.apps[b];
    this.apps[b] = temp;
  }

  /**
   * 构建组件的UI结构
   */
  build() {
   
    // 主容器，垂直布局
    Column() {
   
      // 应用网格区域
      Grid() {
   
        // 遍历所有应用，为每个应用创建一个网格项
        ForEach(this.apps, (item: string) => {
   
          GridItem() {
   
            // 使用自定义builder构建网格项内容
            this.itemBuilder(item)
          }
        })
      }
      // 网格样式和行为设置
      .columnsTemplate('1fr '.repeat(4)) // 设置4列等宽布局
      .columnsGap(20) // 列间距
      .rowsGap(20) // 行间距
      .padding(20) // 内边距
      .supportAnimation(true) // 启用动画支持
      .editMode(true) // 启用编辑模式，允许拖拽
      // 拖拽开始事件处理
      .onItemDragStart((_event: ItemDragInfo, itemIndex: number) => {
   
        // 返回被拖拽项的UI
        return this.itemBuilder(this.apps[itemIndex]);
      })
      // 拖拽放置事件处理
      .onItemDrop((_event: ItemDragInfo, itemIndex: number, insertIndex: number, isSuccess: boolean) => {
   
        // 如果拖拽失败或目标位置无效，则不执行操作
        if (!isSuccess || insertIndex >= this.apps.length) {
   
          return;
        }
        // 交换元素位置
        this.changeIndex(itemIndex, insertIndex);
      })
      .layoutWeight(1) // 使网格区域占用剩余空间

      // 结果显示区域
      Column({
    space: 10 }) {
   
        // 标题文本
        Text('应用排序结果')
          .fontSize(16)
          .fontColor(Color.White)

        // 弹性布局，允许换行
        Flex({
    wrap: FlexWrap.Wrap, justifyContent: FlexAlign.Center }) {
   
          // 遍历应用数组，为每个应用创建一个彩色标签
          ForEach(this.apps, (item: string, index: number) => {
   
            Text(item)
              .fontSize(12)
              .fontColor(Color.White)
              .backgroundColor(this.appColors[index % this.appColors.length])
              .borderRadius(12)
              .padding({
   
                left: 10,
                right: 10,
                top: 4,
                bottom: 4
              })
              .margin(4)
          })
        }
        .width('100%')
      }
      .width('100%')
      .padding(10) // 内边距
      .backgroundColor('#0DFFFFFF') // 半透明背景
      .expandSafeArea() // 扩展到安全区域
      .borderRadius({
    topLeft: 20, topRight: 20 }) // 上左右圆角
    }
    // 主容器样式设置
    .width('100%')
    .height('100%')
    .expandSafeArea() // 扩展到安全区域
    .linearGradient({
   
      angle: 135, // 渐变角度
      colors: [
        ['#121212', 0], // 起点色
        ['#242424', 1] // 终点色
      ]
    })
  }
}

Grid组件的关键属性详解

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

  1. columnsTemplate: 定义网格的列模板。例如'1fr 1fr 1fr 1fr'表示四列等宽布局。'1fr'中的'fr'是fraction(分数)的缩写，表示按比例分配空间。

  2. rowsTemplate: 定义网格的行模板。如果不设置，行高将根据内容自动调整。

  3. columnsGap: 列之间的间距。

  4. rowsGap: 行之间的间距。

  5. editMode: 是否启用编辑模式。设置为true时启用拖拽功能。

  6. supportAnimation: 是否支持动画。设置为true时，拖拽过程中会有平滑的动画效果。

拖拽功能的关键事件详解

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

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

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

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

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

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

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

小结与进阶提示

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

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

进阶提示：

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

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

文章标签：
索引
容器
UED
安全
API
关键词：
HarmonyOS网格
HarmonyOS拖拽
HarmonyOS教程
megasu
目录
相关文章
游客u6vcprrm3r23y
|
存储 JSON 搜索推荐
鸿蒙5开发宝藏案例分享---自由流转的拖拽多屏联动
本文分享了鸿蒙开发中的五大实用案例，包括页面跳转、列表渲染、网络请求封装、数据持久化和系统能力调用。通过具体代码示例与避坑指南，手把手教你掌握常用功能，助你高效开发。无论是初学者还是进阶开发者，都能从中受益！
游客u6vcprrm3r23y
121 0
全栈若城
|
3月前
|
定位技术 UED
70. [HarmonyOS NEXT 实战案例九] 旅游景点网格布局（下）
在上一篇教程中，我们学习了如何使用GridRow和GridCol组件实现基本的旅游景点网格布局。本篇教程将在此基础上，深入探讨如何优化布局、添加交互功能，以及实现更多高级特性，打造一个功能完善的旅游景点应用。
全栈若城
80 1
全栈若城
|
3月前
|
容器
69.[HarmonyOS NEXT 实战案例九] 旅游景点网格布局（上）
本教程将详细讲解如何使用HarmonyOS NEXT中的GridRow和GridCol组件实现旅游景点网格布局。通过网格布局，我们可以以美观、规整的方式展示各种旅游景点信息，为用户提供良好的浏览体验。
全栈若城
73 1
全栈若城
|
3月前
|
UED
66.[HarmonyOS NEXT 实战案例七] 健身课程网格布局（下）
在上一篇教程中，我们学习了如何使用GridRow和GridCol组件实现基本的健身课程网格布局。本篇教程将在此基础上，深入探讨如何优化布局、添加交互功能，以及实现更多高级特性，打造一个功能完善的健身课程应用。
全栈若城
74 1
全栈若城
|
3月前
|
设计模式 UED
65. [HarmonyOS NEXT 实战案例七] 健身课程网格布局（上）
本教程将介绍如何使用HarmonyOS NEXT的GridRow和GridCol组件实现健身课程的网格布局展示。健身课程网格布局是一种常见的UI设计模式，适用于展示各种健身课程信息，包括课程名称、教练信息、课程时长、难度级别等。通过网格布局，用户可以快速浏览多个课程，并根据自己的需求选择合适的课程。
全栈若城
71 1
全栈若城
|
3月前
|
设计模式 容器
61.[HarmonyOS NEXT 实战案例五] 社交应用照片墙网格布局（上）
社交应用中的照片墙是一种常见的UI设计模式，它以网格形式展示用户的照片集合，让用户可以浏览、分享和互动。本教程将详细讲解如何使用HarmonyOS NEXT的GridRow和GridCol组件实现一个美观、灵活的社交应用照片墙网格布局。 在本教程中，我们将学习如何设计照片墙的数据结构、如何使用GridRow和GridCol组件创建网格布局、如何实现照片卡片，以及如何处理不同尺寸的照片。通过本教程，你将掌握使用GridRow和GridCol组件实现复杂网格布局的技巧。
全栈若城
64 1
全栈若城
|
3月前
|
C++ 容器
57.[HarmonyOS NEXT 实战案例三] 音乐专辑网格展示（上）
HarmonyOS NEXT提供了强大的布局组件，其中GridRow和GridCol组件非常适合实现网格布局。在音乐应用中，专辑展示通常采用网格布局，以便用户可以直观地浏览各种音乐专辑。本教程将详细讲解如何使用GridRow和GridCol组件实现音乐专辑的网格展示布局。
全栈若城
79 1
全栈若城
|
3月前
64.[HarmonyOS NEXT 实战案例六] 餐饮菜单网格布局（下）
在上一篇教程中，我们学习了如何使用GridRow和GridCol组件实现基本的餐饮菜单网格布局。本篇教程将在此基础上，深入探讨如何优化布局、添加交互功能，以及实现更多高级特性，打造一个功能完善的餐饮菜单应用。
全栈若城
78 0
全栈若城
|
3月前
|
存储
63.[HarmonyOS NEXT 实战案例六] 餐饮菜单网格布局（上）
在移动应用开发中，餐饮类应用的菜单展示是一个常见的需求。一个设计良好的菜单布局不仅能够清晰地展示菜品信息，还能提升用户的点餐体验。本教程将详细讲解如何使用HarmonyOS NEXT的GridRow和GridCol组件实现一个美观实用的餐饮菜单网格布局。
全栈若城
69 0
全栈若城
|
3月前
|
UED
62. [HarmonyOS NEXT 实战案例五] 社交应用照片墙网格布局（下）
在上一篇教程中，我们学习了如何使用GridRow和GridCol组件实现基本的社交应用照片墙网格布局。本篇教程将在此基础上，深入探讨如何优化布局、添加交互功能，以及实现更多高级特性，打造一个功能完善的社交应用照片墙。
全栈若城
59 0
通义灵码

AI编码助手

热门文章

最新文章

  • 1
    实战使用 Qwen3-coder 低代码开发 HTML 个人网站
  • 2
    IDEA中通义灵码的使用技巧
  • 3
    Qwen-Agent：阿里通义开源 AI Agent 应用开发框架，支持构建多智能体，具备自动记忆上下文等能力
  • 4
    VSCode编程助手工程能力体验报告（一）：通义灵码 - 帮你高效切入新项目、编码和提升质量
  • 5
    小白如何开始使用通义灵码（含安装IDE、安装灵码插件）
  • 6
    🧠 用 AI 提升你的编程效率 —— 在 PyCharm 中体验通义灵码
  • 7
    在通义灵码里用上DeepSeek-V3 和 DeepSeek-R1 满血版671B模型
  • 8
    通义灵码使用指南
  • 9
    通义灵码助你打造专属高德 MCP 服务
  • 10
    通义灵码让AI帮你实现自动化编程
  • 1
    用通义灵码在VsCode生成新浪新闻某文章HTML页面
    25
  • 2
    通义灵码助你打造专属高德 MCP 服务
    85
  • 3
    实战使用 Qwen3-coder 低代码开发 HTML 个人网站
    1143
  • 4
    OneCode图生代码技术深度解析：从可视化设计到注解驱动实现的全链路架构
    87
  • 5
    通义灵码制作用户代理信息查看器
    52
  • 6
    用通义灵码喝鸡汤，天天正能量！
    61
  • 7
    用 通义灵码和 PyQt5 爬虫智能体轻松爬取掘金，自动化采集技术文章和数据
    188
  • 8
    通义灵码开发文本大小写转换器，结合 MCP Server 自动部署
    90
  • 9
    通义灵码与颜色板生成器，为前端开发提供智能配色解决方案
    133
  • 10
    通义灵码实现大海、日出与白云的动态首页背景设计，MCP一键部署在线预览。
    65

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云OSS设置跨域访问