HarmonyOS Next应用开发实战——底部弹框组件的实现（part1）

用户545748341772025-03-31 18:14

HarmonyOS Next应用开发实战------底部弹框组件的实现

文章概要

本文聚焦于HarmonyOS Next应用开发中底部弹框组件的实现。详细介绍了底部弹框组件的布局搭建、搜索与筛选功能、排序方式选择对话框以及站点列表展示等核心功能，通过一系列组件和方法实现了一个功能丰富且交互性强的底部弹框组件。

核心功能介绍

1. 组件定义与属性设置

定义了SheetTransition组件，接收addressName和StationList作为属性，并使用@State管理isShow状态，用于控制底部弹框的显示与隐藏。

typescript 复制代码

@Component
export struct SheetTransition {
  @Prop addressName: string;
  @Prop StationList: StationInfo[];
  @State isShow: boolean = true;
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomDialogExample({
      cancel: () => {
        this.onCancel()
      }
    }),
  })
  // ...
}

2. 搜索与筛选布局

在底部弹框中添加了搜索框和筛选按钮，方便用户查找和筛选站点。

typescript 复制代码

@Builder
myBuilder() {
  Column() {
    Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
      Stack({ alignContent: Alignment.Start }) {
        Image($r('app.media.en_search'))
          .width(ServiceConstants.TEXT_INPUT_HEIGHT)
          .zIndex(1)
        TextInput({ placeholder: '搜索目的地和充电站' })
          .placeholderFont({ size: CommonConstants.S_FONT_SIZE })
          .placeholderColor(ServiceConstants.TEXT_PLACEHOLDER_COLOR)
          .backgroundColor(Color.White)
          .height(ServiceConstants.TEXT_INPUT_HEIGHT)
          .padding({ left: ServiceConstants.TEXT_INPUT_HEIGHT })
      }
      .layoutWeight(1)
      .borderRadius(ServiceConstants.TEXT_INPUT_HEIGHT)
      .clip(true)

      Column() {
        Image($r('app.media.ic_empty'))
          .width(CommonConstants.PIC_WIDTH).height(CommonConstants.PIC_HEIGHT)
        Text('筛选').fontSize(CommonConstants.S_FONT_SIZE)
      }
      .margin({ left: CommonConstants.MAIN_PADDING })
    }
    .padding(CommonConstants.MAIN_PADDING)
    // ...
  }
  // ...
}