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

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

文章概要

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

核心功能介绍

1. 组件定义与属性设置

定义了SheetTransition组件,接收addressNameStationList作为属性,并使用@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)
    // ...
  }
  // ...
}
相关推荐
高心星16 小时前
鸿蒙5.0项目开发——V2装饰器@Event的使用
harmonyos
ChinaDragon17 小时前
HarmonyOS:创建ArkTS卡片
harmonyos
高心星17 小时前
HarmonyOS 5.0应用开发——V2装饰器@once的使用
harmonyos
程序员潘Sir21 小时前
鸿蒙应用开发从入门到实战(六):ArkTS声明式UI和组件化
harmonyos·鸿蒙
猫林老师1 天前
HarmonyOS数据持久化:Preferences轻量级存储实战
华为·harmonyos
Devil枫1 天前
鸿蒙深链落地实战:从安全解析到异常兜底的全链路设计
安全·华为·harmonyos
低调小一1 天前
Android传统开发 vs Android Compose vs HarmonyOS ArkUI 对照表
android·华为·harmonyos
程序员江同学1 天前
ovCompose + AI 开发跨三端的 Now in Kotlin App
android·kotlin·harmonyos