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. 站点列表展示

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

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应用中创建一个功能完善的底部弹框组件。