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)
    // ...
  }
  // ...
}
相关推荐
爱笑的眼睛114 小时前
08-自然壁纸实战教程-视频列表-云
华为·harmonyos
Georgewu10 小时前
【HarmonyOS 5】鸿蒙中自定义弹框OpenCustomDialog、CustomDialog与DialogHub的区别详解
harmonyos
塞尔维亚大汉10 小时前
鸿蒙内核源码分析(消息封装篇) | 剖析LiteIpc 进程通讯内容
harmonyos·源码阅读
Georgewu10 小时前
【HarmonyOS NEXT】鸿蒙跳转华为应用市场目标APP下载页
harmonyos
ajassi200012 小时前
开源 Arkts 鸿蒙应用 开发(六)数据持久--文件和首选项存储
linux·开源·harmonyos
塞尔维亚大汉13 小时前
鸿蒙内核源码分析(共享内存) | 进程间最快通讯方式
harmonyos·源码阅读
生如夏花℡17 小时前
HarmonyOS学习记录4
学习·华为·harmonyos
xq952717 小时前
编程之路2025年中总结,勇往直前 再战江湖
harmonyos
枫叶丹418 小时前
【HarmonyOS Next之旅】DevEco Studio使用指南(四十二) -> 动态修改编译配置
华为·harmonyos·deveco studio·harmonyos next
前端世界1 天前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos