在HarmonyOS NEXT开发中点击一个按钮，在按钮位置一下弹出一个组件对话框选择显示内容？

Question

在HarmonyOS NEXT开发中点击一个按钮，在按钮位置一下弹出一个组件对话框选择显示内容？点击筛选功能，筛选按钮可以在任何位置，然后在筛选按钮位置下面弹窗到底层满屏布局模块，不是Dialog那种半透明弹窗样式。

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

筛选组件目前需要自定义才能实现，可参考如下代码：

@Entry 
@Component 
struct CeilingEffect { 
  private scrollerForScroll: Scroller = new Scroller() 
  private scrollerForList: Scroller = new Scroller() 
  @State showDialog: boolean = false 
  @State recordTitleList: Array<string> = [] 
  @State businessHours: string = '营业时间' 
  private hoursList: Array<string> = [ 
    "周一", "周二", "周三", "周四", "周五", "周六", "周日" 
  ] 
  @State checkedList: Record<string, boolean> = { 
    "周一": false, 
    "周二": false, 
    "周三": false, 
    "周四": false, 
    "周五": false, 
    "周六": false, 
    "周日": false, 
  } 
 
  @Builder 
  tabBuilder() { 
    Row() { 
      Row() { 
        Text(this.businessHours) 
          .fontColor(this.showDialog ? Color.Orange : Color.Black) 
          .fontSize(16) 
          .maxLines(1) 
          .textOverflow({ 
            overflow: TextOverflow.Ellipsis 
          }) 
          .constraintSize({ maxWidth: 70 }) 
 
        Image($r('app.media.ic_public_spinner_small')) 
          .width(20) 
          .height(20) 
          .margin({ left: 8 }) 
          .fillColor(this.showDialog ? Color.Orange : Color.Black) 
          .rotate({ 
            x: 1, 
            y: 0, 
            z: 0, 
            centerX: '50%', 
            centerY: '50%', 
            angle: this.showDialog ? 180 : 0 
          }) 
      } 
      .onClick(() => { 
        this.showDialog = true 
        this.scrollerForScroll.scrollEdge(Edge.Bottom) 
      }) 
    } 
    .width('100%') 
    .padding({ left: 16 }) 
    .justifyContent(FlexAlign.Start) 
    .alignItems(VerticalAlign.Center) 
  } 
 
  @Builder 
  MultipleChoiceContent() { 
    Column() { 
      Text('营业时间') 
        .fontSize(18) 
        .textAlign(TextAlign.Start) 
        .fontWeight(FontWeight.Medium) 
        .margin(20) 
 
      Grid() { 
        ForEach(this.hoursList, (item: string) => { 
          GridItem() { 
            Toggle({ type: ToggleType.Button, isOn: this.checkedList[item] }) { 
              Text(item).fontSize(14) 
                .fontColor(this.checkedList[item] ? Color.Orange : Color.Black) 
            } 
            .height(40) 
            .width('100%') 
            .selectedColor("#fffadad1") 
            .onChange((isOn: boolean) => { 
              this.checkedList[item] = isOn 
              if (isOn) { 
                this.recordTitleList.push(item) 
                this.businessHours = item + '....' 
              } else { 
                this.recordTitleList = this.recordTitleList.filter(title => item !== title); 
                let length = this.recordTitleList.length - 1 
                if (length >= 0) { 
                  this.businessHours = this.recordTitleList[length] + '....' 
                } else { 
                  this.businessHours = '营业时间' 
                } 
              } 
            }) 
          } 
        }) 
      } 
      .columnsGap(10) 
      .rowsGap(10) 
      .padding({ left: 16, right: 16 }) 
      .width('100%') 
      .height(180) 
      .columnsTemplate('1fr 1fr 1fr') 
      .rowsTemplate('1fr 1fr 1fr') 
 
      Divider() 
        .height('1px') 
        .margin(10) 
        .color($r('sys.color.ohos_id_color_list_separator')) 
 
      Row() { 
        Button('重置') 
          .backgroundColor('#ffefeded') 
          .fontSize(20) 
          .fontColor(Color.Grey) 
          .height(48) 
          .width('50%') 
          .margin({ right: 4 }) 
          .onClick(() => { 
            this.checkedList = { 
              "周一": false, 
              "周二": false, 
              "周三": false, 
              "周四": false, 
              "周五": false, 
              "周六": false, 
              "周日": false, 
            } 
            this.businessHours = '营业时间' 
          }) 
 
        Button('确认') 
          .fontSize(20) 
          .backgroundColor("#ff5700") 
          .fontColor(Color.White) 
          .height(48) 
          .width('50%') 
          .margin({ right: 4 }) 
          .onClick(() => { 
            this.showDialog = false 
          }) 
      } 
      .padding({ left: 20, right: 20, bottom: 20 }) 
      .justifyContent(FlexAlign.SpaceBetween) 
      .width('100%') 
    } 
    .onTouch((e) => { 
      e.stopPropagation() 
    }) 
  } 
 
  @Builder 
  selectItem(title: string, isSelect: boolean, callBack?: () => void) { 
    Row() { 
      Text(title) 
        .fontSize(16) 
        .fontColor(isSelect ? Color.Orange : Color.Black) 
        .margin(20) 
 
      if (isSelect) { 
        Image($r('app.media.ic_public_ok_filled')) 
          .width(24) 
          .height(24) 
          .margin({ right: 24 }) 
          .fillColor(Color.Orange) 
      } 
    } 
    .width('100%') 
    .alignItems(VerticalAlign.Center) 
    .justifyContent(FlexAlign.SpaceBetween) 
    .onClick(() => { 
      if (callBack) { 
        callBack() 
      } 
    }) 
  } 
 
  @Builder 
  tabContentData() { 
    List({ scroller: this.scrollerForList }) { 
      ListItem() { 
        Stack() { 
          // 内容区 
          Column() 
            .width('100%') 
            .height('100%') 
            .opacity(this.showDialog ? .3 : 1) 
            .backgroundColor(this.showDialog ? Color.Black : Color.White) 
 
          // 选择弹窗区域 
          if (this.showDialog) { 
            Column() { 
              Column() { 
                this.MultipleChoiceContent() 
              } 
 
              .width('100%') 
              .backgroundColor($r('sys.color.ohos_id_color_dialog_bg')) 
 
              Column() 
                .layoutWeight(1) 
                .width('100%') 
                .onClick(() => { 
                  this.showDialog = false 
                }) 
            } 
 
            .height('100%') 
          } 
        } 
        .alignContent(Alignment.TopStart) 
      } 
    } 
    .height('100%') 
    .scrollBar(BarState.Off) 
    .edgeEffect(EdgeEffect.None) 
    .nestedScroll({ 
      scrollForward: NestedScrollMode.PARENT_FIRST, 
      scrollBackward: NestedScrollMode.SELF_FIRST 
    }) 
  } 
 
  build() { 
    Stack() { 
      Scroll(this.scrollerForScroll) { 
        Column() { 
          if(!this.showDialog){ 
            Row().height(100).width('100%') 
              .backgroundColor('#F1F3F5') 
          } 
 
          Tabs({ barPosition: BarPosition.Start }) { 
            TabContent() { 
              this.tabContentData() 
            } 
            .tabBar(this.tabBuilder()) 
          } 
          .vertical(false) 
          .barWidth('100%') 
        } 
      } 
      .scrollBar(BarState.Off) 
 
      if (this.showDialog) { 
        Column() 
          .height('100%') 
          .width('100%') 
          .hitTestBehavior(HitTestMode.Transparent) 
      } 
    } 
    .alignContent(Alignment.TopStart) 
    .width('100%') 
    .height('100%') 
    .backgroundColor('#F1F3F5') 
  } 
}

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。