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)
    // ...
  }
  // ...
}
相关推荐
程序员潘Sir25 分钟前
鸿蒙应用开发从入门到实战(二十二):使用Stack实现层叠布局
harmonyos
深海的鲸同学 luvi1 小时前
【HarmonyOS】原生 Markdown 渲染解决方案 —— @luvi/lv-markdown-in
华为·harmonyos·markdown·原生渲染
2501_919749031 小时前
鸿蒙:将项目的rawfile目录下全部文件拷贝到app沙箱目录
华为·harmonyos
前端世界1 小时前
从零搭建鸿蒙高效数据存储框架:RdbStore全流程实战与性能优化
华为·性能优化·harmonyos
大霞上仙2 小时前
通过hdc 安装 .hap 到鸿蒙手机
华为·harmonyos
前端世界3 小时前
从零构建鸿蒙高效数据恢复工具:完整实战教程与可运行Demo
华为·harmonyos
郝晨妤3 小时前
【鸿蒙5.0】Scroll左右滑动
华为od·华为·harmonyos·鸿蒙
Georgewu4 小时前
【HarmonyOS Bug踩坑】主窗口调用的接口,UI在子窗口异常显示
harmonyos
SuperHeroWu711 小时前
【HarmonyOS AI赋能】朗读控件详解
华为·ai·harmonyos·朗读·赋能·speechkit·场景化语音