鸿蒙Next中swipeaction功能如何实现

在鸿蒙Next中，如何实现SwipeAction功能？具体需要哪些步骤和代码示例？能否提供一个简单的实现案例？

2 回复

鸿蒙Next的SwipeAction实现很简单：

  1. 在List或ListItem上添加swipeAction属性。
  2. 配置左右滑动的按钮（如删除、收藏），绑定点击事件。
  3. 用swipeAction方法控制展开/收起。
    代码示例：
ListItem() {  
  // 内容  
}  
.swipeAction({ end: deleteBtn, start: favorBtn })

滑就完事了！

更多关于鸿蒙Next中swipeaction功能如何实现的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，SwipeAction 功能可以通过 List 组件的 swipeAction 属性实现，用于在列表项上支持左滑或右滑操作。以下是实现步骤和示例代码：

实现步骤：

  1. 创建数据模型：定义列表项的数据结构。
  2. 构建列表：使用 List 组件，并通过 swipeAction 属性配置滑动手势。
  3. 定义滑出内容：设置左滑或右滑时显示的组件（如删除、收藏按钮）。

示例代码：

import { List, ListItem, Button, SwipeActionOptions } from '@kit.ArkUI';

// 定义数据模型
interface ItemData {
  id: number;
  name: string;
}

@Entry
@Component
struct SwipeActionExample {
  private data: ItemData[] = [
    { id: 1, name: '项目1' },
    { id: 2, name: '项目2' },
    { id: 3, name: '项目3' }
  ];

  build() {
    Column() {
      List({ space: 10 }) {
        ForEach(this.data, (item: ItemData) => {
          ListItem() {
            Text(item.name)
              .fontSize(20)
              .padding(10)
          }
          .swipeAction({
            // 右滑操作（从右向左滑出）
            right: this.buildRightSwipeAction(item),
            // 左滑操作（从左向右滑出，可选）
            left: this.buildLeftSwipeAction(item)
          } as SwipeActionOptions)
        }, (item: ItemData) => item.id.toString())
      }
      .listDirection(Axis.Vertical) // 设置列表方向
    }
    .width('100%')
    .height('100%')
  }

  // 构建右滑操作内容（如删除）
  @Builder buildRightSwipeAction(item: ItemData) {
    Button('删除')
      .backgroundColor(Color.Red)
      .fontColor(Color.White)
      .onClick(() => {
        // 处理删除逻辑，例如从数据中移除该项
        console.log(`删除项目: ${item.name}`);
      })
      .width(80)
      .height('100%')
  }

  // 构建左滑操作内容（如收藏）
  @Builder buildLeftSwipeAction(item: ItemData) {
    Button('收藏')
      .backgroundColor(Color.Blue)
      .fontColor(Color.White)
      .onClick(() => {
        // 处理收藏逻辑
        console.log(`收藏项目: ${item.name}`);
      })
      .width(80)
      .height('100%')
  }
}

关键说明：

  • swipeAction 属性：通过 right 和 left 分别配置右滑和左滑时显示的组件。
  • @Builder 方法：用于构建滑出内容的UI，支持自定义样式和点击事件。
  • 手势触发：用户水平滑动列表项时，对应方向的组件会滑出，点击后可执行操作（如删除数据）。

注意事项：

  • 确保 List 和 ListItem 正确导入。
  • 滑动操作默认支持手势取消（反向滑动可收回）。
  • 实际开发中需结合数据管理（如更新 data 数组并刷新UI）。

通过以上代码，即可在鸿蒙Next中实现基本的 SwipeAction 功能。

回到顶部