Implementing Vertical Carousel Notifications in HarmonyOS Next

#harmonyos #arkts

To achieve the automatic vertical scrolling effect for text in ArkUI, the Swiper component can be used. The Swiper component provides the capability to display content in a sliding carousel. As a container component, Swiper can carousel through its child components when multiple ones are configured.

1. Vertical Carousel Implementation

Swiper() {
  ForEach(this.transactionList, (item: TransactionInfo) => {
    Row() {
      Image(StrUtil.isBlank(item.TitleImage) ? $r("app.media.icon_circular_default_head") : item.TitleImage)
        .width(44)
        .height(44)
        .borderRadius(22)
      Text(item.Title)
        .fontSize(14)
        .fontColor($r("app.color.text_one"))
        .maxLines(2)
        .ellipsisMode(EllipsisMode.END)
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .lineHeight(22)
        .margin({ left: 9 })
        .layoutWeight(1)
    }.onClick(() => {
      ToastUtil.showToast("Clicked on transaction report")
    })
  })
}
.vertical(true) // Enable vertical carousel direction
.loop(true)    // Enable loop playback
.autoPlay(true) // Enable auto-play
.indicator(false) // Whether to show navigation dots
.height(44)
.margin({ left: 9 })
.layoutWeight(1)

Key Properties:

vertical: When true, the carousel slides vertically; when false, it slides horizontally (default: false).
loop: Controls whether the carousel loops (default: true).
autoPlay: Enables automatic carousel of child components (default: false, interval: 3000ms).
interval: Carousel interval in milliseconds (default: 3000ms).
indicator: Whether to display navigation dots.

2. Implementing a Custom Dialog

Use the @CustomDialog decorator to create a custom dialog where you can define the dialog's content, add confirm/cancel buttons, and include data functions.

import { StrUtil } from "@pura/harmony-utils"
import { TransactionInfo } from "../model/TransactionInfo"

@Preview
@CustomDialog
export struct DealInfoDialog {
  dealDialogController?: CustomDialogController
  @Prop transaction?: TransactionInfo = undefined

  build() {
    Column() {
      Text("Breaking News: Important Announcement")
        .width("60%")
        .margin({ top: 92 })
        .fontSize(16)
        .fontWeight(600)
        .fontColor($r("app.color.yellow_aureus"))
        .textAlign(TextAlign.Center)
      Row() {
        Image(StrUtil.isBlank(this.transaction?.TitleImage) ? $r("app.media.placeholder") :
          this.transaction?.TitleImage).width(68).height(68).borderRadius(6)
        Column() {
          Text(this.transaction?.Title)
            .fontSize(13)
            .fontWeight(600)
            .fontColor($r("app.color.yellow_aureus"))
            .maxLines(1)
            .width("70%")
            .ellipsisMode(EllipsisMode.END)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
          Text("Property ID: " + StrUtil.toStr(this.transaction?.PropertyNo))
            .fontSize(12)
            .fontColor($r("app.color.yellow_aureus"))
          Row() {
            Text(this.transaction?.Price.toString()).fontColor("#DC2424").fontSize(18).fontWeight(800)
            Text("CNY").fontColor("#DC2424").fontSize(12).fontWeight(600).baselineOffset(-2)
          }.backgroundColor($r("app.color.yellow_aureus"))
          .padding({
            left: 10,
            right: 10,
            top: 1,
            bottom: 1
          })
          .borderRadius(4)
        }.height(68)
        .alignItems(HorizontalAlign.Start)
        .justifyContent(FlexAlign.SpaceBetween)
        .margin({ left: 12 })
      }.width("65%")
      .margin({ top: 14 }).alignItems(VerticalAlign.Top)

      Text(this.transaction?.ShareInfo)
        .width("65%")
        .margin({ top: 20 })
        .fontSize(13)
        .fontColor($r("app.color.yellow_aureus"))
    }
    .width("100%")
    .height(529)
    .backgroundImage($r("app.media.icon_deal_dialog_bg"))
    .backgroundImageSize({ width: "100%", height: "100%" })
  }
}

Create a Controller to Link with the Decorator:

this.dealDialogController = new CustomDialogController({
  builder: DealInfoDialog({ transaction: this.transaction }),
  alignment: DialogAlignment.Center,
  customStyle: true,
  offset: { dx: 0, dy: -20 },
  maskColor: 0x66000000
})

Usage:

this.dealDialogController?.open()

Create a feature flag in your IDE in 5 minutes with LaunchDarkly’s MCP server 🏁

How to create, evaluate, and modify flags from within your IDE or AI client using natural language with LaunchDarkly's new MCP server. Follow along with this tutorial for step by step instructions.

Read full post