Creating an Interactive UI with swipeAction in HarmonyOS Next

Read the original article：Creating an Interactive UI with swipeAction in HarmonyOS Next

swipeAction

Introduction

Swipe menus are common in many applications. For example, a messaging application generally provides a swipe-to-delete feature for its message list. This feature allows users to delete a message by swiping left on it and touching the delete button.

In this article, we will discuss swiperAction and how we can use.

What is swipeAction?

The swipeAction attribute allows users to swipe left or right on a list item. The SwipeActionOptions parameter is mandatory for initializing the swipeAction attribute. The start parameter indicates the component that appears from the start edge when the list item is swiped right, and the end parameter indicates the component that appears from the end edge when the list item is swiped left.

Let’s do a Notes project to use swipeAction.

✨ Create a Notes Model

export interface Notes {
  content: string;
}

export const dummyNotes: Notes[] = [
  {
    content: "Don\'t forget to look at the opening hours of the Louvre Museum."
  },
  {
    content: "Remember to check the ticket prices for the Eiffel Tower before visiting."
  },
]

Notes Model

✨ Create a notes list

itemEnd(): a builder for the delete button

itemStart(): a builder for the edit button

import { dummyNotes, Notes } from "../model/Notes";

@Component
export struct NotesList{
  private notesList: Array<Notes> = dummyNotes;
  private scroller: Scroller = new Scroller()

  @Builder
  itemEnd() {
    Button({ type: ButtonType.Circle }) {
      Image($r('app.media.trash'))
        .width(20)
        .height(20)
    }
    .backgroundColor('#ffff0000')
    .padding(8)
    .margin(2)
  }

  @Builder
  itemStart() {
    Button({ type: ButtonType.Circle }) {
      Image($r('app.media.edit'))
        .width(20)
        .height(20)
    }
    .backgroundColor('#ffff9600')
    .padding(8)
    .margin(4)
  }

  build(){
    List({ space: 5, initialIndex: 0, scroller: this.scroller }) {
      ForEach(this.notesList, (item: Notes, index: number) => {
        ListItem() {
          Text(item.content)
            .fontSize(14)
            .textAlign(TextAlign.Center)
            .padding(4)
        }
        .borderRadius(10)
        .backgroundColor('#ff3d8aff')
        .width('100%')
        .swipeAction({
          start: {
            builder: () => {
              this.itemStart()
            },
          },
          end: {
            builder: () => {
              this.itemEnd()
            },
          }
        })
      }, (index: number) => index.toString())
    }
    .listDirection(Axis.Vertical)
    .width('80%')
    .height('100%')
  }
}

NotesList

✨ Show the notes list on the Notes Page

import { NotesList } from '../components/NotesList';

@Entry
@Component
struct NotesPage {

  build() {
    Column() {
      Text('Notes').padding({bottom:5})
      NotesList()
    }
    .width('100%').padding({ top: 15 })
  }
}

NotesPage

Output

Conclusion

_Swipe actions provide an intuitive and efficient way to interact quickly, such as deleting or archiving items in a list. In this article, we explored how the swipeAction attribute works and how to implement it using the swipeActionOptions parameters. By building a simple Notes project, we demonstrated how to easily enable swipe gestures on list items and trigger actions. Incorporating swipe interactions into your HarmonyOS apps improves usability and offers a more modern and user-friendly experience.
_