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)
    // ...
  }
  // ...
}
相关推荐
低调小一1 小时前
Android传统开发 vs Android Compose vs HarmonyOS ArkUI 对照表
android·华为·harmonyos
程序员江同学4 小时前
ovCompose + AI 开发跨三端的 Now in Kotlin App
android·kotlin·harmonyos
猛码Memmat5 小时前
华为HarmonyOS开发文档
华为·harmonyos
祥睿夫子6 小时前
ArkTS 未被深挖的核心点:静态多态限制、静态成员与单例实战
harmonyos
高心星7 小时前
HarmonyOS 5.0应用开发——V2装饰器@local的使用
harmonyos
HarmonyOS_SDK7 小时前
【FAQ】应用A如何使用应用B内的文件?
harmonyos
万少8 小时前
可可图片编辑 HarmonyOS(6)水印效果
前端·harmonyos
流影ng8 小时前
【HarmonyOS】MVVM与三层架构
华为·架构·harmonyos
爱笑的眼睛118 小时前
HarmonyOS Stage 模型与 ArkUI 声明式开发深度实践:构建高效稳定的应用
华为·harmonyos