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

3. 排序方式选择对话框

点击"综合排序"可弹出排序方式选择对话框,用户可以选择不同的排序方式。

typescript 复制代码
Row(){
  Text('综合排序').fontSize(CommonConstants.M_FONT_SIZE)
  Image($r('app.media.ic_arrow_drop_down'))
    .width(CommonConstants.PIC_WIDTH).height(CommonConstants.PIC_HEIGHT)
}
.justifyContent(FlexAlign.Start)
.alignItems(VerticalAlign.Center)
.onClick(() => {
  this.dialogController.open()
})

@CustomDialog
struct CustomDialogExample {
  cancel?: () => void
  controller: CustomDialogController

  build() {
    Column() {
      Text('排序方式').fontSize(CommonConstants.L_FONT_SIZE).margin({ top: 0, bottom: 20 })
      Column() {
        Text('综合排序').textDialogStyle()
        Text('距离优先').textDialogStyle()
        Text('价格优先').textDialogStyle().borderWidth(0)
      }
      .justifyContent(FlexAlign.Start)
      .alignItems(HorizontalAlign.Start)
      .width(CommonConstants.COLUMN_WIDTH)

      Flex({ justifyContent: FlexAlign.SpaceAround }) {
        Button('取消')
          .onClick(() => {
            this.controller.close()
            if (this.cancel) {
              this.cancel()
            }
          })
          .fontColor($r('app.color.main_color')).fontSize(CommonConstants.S_FONT_SIZE)
          .backgroundColor(Color.Transparent)
      }.margin({ bottom: CommonConstants.MAIN_PADDING })
    }
    .alignItems(HorizontalAlign.Start)
    .padding({
      top: CommonConstants.MAIN_PADDING * 2,
      right: CommonConstants.MAIN_PADDING * 2,
      left: CommonConstants.MAIN_PADDING * 2
    })
    .width(CommonConstants.COLUMN_WIDTH)
  }
}
4. 站点列表展示

使用ListForEach组件展示站点列表,显示站点名称、距离、标签、充电桩类型和价格等信息。

typescript 复制代码
List({ space: CommonConstants.PUBLIC_SPACE }) {
  ForEach(this.StationList, (item: StationInfo, index: number) => {
    ListItem() {
      Column({ space: CommonConstants.PUBLIC_SPACE }) {
        Flex({ justifyContent: FlexAlign.SpaceBetween }) {
          Text(item.name).fontSize(CommonConstants.M_FONT_SIZE)
          Row({ space: CommonConstants.PUBLIC_SPACE / 2 }) {
            Image($r('app.media.ic_collect'))
              .width(CommonConstants.PIC_WIDTH / 2)
              .height(CommonConstants.PIC_HEIGHT / 2)
            Text(`${item.distance}km`).fontSize(CommonConstants.S_FONT_SIZE).fontColor('#a9a9a9')
          }
        }

        Row() {
          ForEach(item.tag as string[], (itemTag: string, index: number) => {
            Text(`${itemTag}`)
              .fontSize(CommonConstants.S_FONT_SIZE)
              .margin({ right: CommonConstants.PUBLIC_SPACE / 2 })
              .padding({ top: '2vp', right: '5vp', bottom: '2vp', left: '5vp' })
              .borderRadius(4)
              .backgroundColor('#e2e2e2')
          })
        }.width(CommonConstants.COLUMN_WIDTH)

        Flex({ justifyContent: FlexAlign.SpaceBetween }) {
          Row() {
            Row() {
              Text(`直流`)
                .fontSize(CommonConstants.S_FONT_SIZE)
                .backgroundColor('#ceffbc')
                .fontColor('#1ed013')
                .padding('2vp')
                .borderRadius(4)
              Text(`${item.direct}`).fontSize(CommonConstants.M_FONT_SIZE).fontWeight(600)
            }
            .margin({ right: '20vp' })

            Row() {
              Text(`交流`)
                .fontSize(CommonConstants.S_FONT_SIZE)
                .backgroundColor('#c3caf4')
                .fontColor('#0269da')
                .padding('2vp')
                .borderRadius(4)
              Text(`${item.alternating}`)
            }
          }

          Row() {
            Text(`¥${item.price}`)
            Text('/度起')
              .fontSize(CommonConstants.S_FONT_SIZE)
              .fontColor('#a9a9a9')
          }
          .alignItems(VerticalAlign.Bottom)
        }
      }
      .backgroundColor(Color.White)
      .borderRadius(CommonConstants.BORDER_RADIUS)
      .padding(CommonConstants.MAIN_PADDING)
    }
  })
}
.scrollBar(BarState.Off)
.layoutWeight(1)
5. 底部弹框显示与隐藏控制

通过点击"重新推荐"按钮控制底部弹框的显示与隐藏。

typescript 复制代码
build() {
  Column() {
    Button('重新推荐')
      .onClick(() => {
        this.isShow = true
      })
      .fontSize(CommonConstants.L_FONT_SIZE)
      .bindSheet($$this.isShow, this.myBuilder(), {
        detents: [SheetSize.MEDIUM, SheetSize.LARGE, 200],
        showClose: false,
        preferType: SheetType.CENTER,
        enableOutsideInteractive: true,
        shouldDismiss: ((sheetDismiss: SheetDismiss) => {
          sheetDismiss.dismiss()
        })
      })
  }
  .justifyContent(FlexAlign.Center)
}

通过以上核心功能的实现,开发者可以在HarmonyOS Next应用中创建一个功能完善的底部弹框组件。

相关推荐
生如夏花℡3 小时前
HarmonyOS学习记录4
学习·华为·harmonyos
xq95274 小时前
编程之路2025年中总结,勇往直前 再战江湖
harmonyos
枫叶丹44 小时前
【HarmonyOS Next之旅】DevEco Studio使用指南(四十二) -> 动态修改编译配置
华为·harmonyos·deveco studio·harmonyos next
前端世界16 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
阿巴~阿巴~18 小时前
操作系统核心技术剖析:从Android驱动模型到鸿蒙微内核的国产化实践
android·华为·harmonyos
iMerryou19 小时前
鸿蒙的动态渐变背景实现
harmonyos
Keya1 天前
在HarmonyOS(鸿蒙)中H5页面中的视频不会自动播放
app·harmonyos·arkts
HMS Core1 天前
用AI重塑游戏体验:《诛仙2》携手HarmonyOS SDK实现性能与功耗双赢
人工智能·游戏·harmonyos
儿歌八万首1 天前
HarmonyOS中各种动画的使用介绍
华为·harmonyos·arkts·arkui
dilvx1 天前
配置鸿蒙 fastboot
华为·harmonyos