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

@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') 
  } 
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.