OpenHarmony应用如何使用bindSheet属性为组件绑定半模态页面原创

深开鸿

发布于 2024-1-23 10:13

浏览

0收藏

作者：苟晶晶

简介：

为组件绑定半模态页面可以使用.bindSheet属性。

文档环境：

开发环境：Windows 11家庭版
DevEco Studio版本：DevEco Studio 3.1.1 Release (3.1.0.501)
SDK版本：4.1.6.1 Beta1(full sdk)
开发板型号：DAYU200(RK3568)
系统版本：OpenHarmony 4.1.6.1

演示demo：

新建一个 Stage 框架的 demo 工程，在page/Index.ets中新增组件控制半模态页面的各种属性：允许开发者配置所在页面是否允许交互、设置弹出的半模态页面的切换高度档位、设置弹出的半模态弹出样式、设置弹出的半模态所在页面是否显示关闭图标、设置弹出的半模态页面是否使用模糊背景。

新增Button按钮，使用.bindSheet绑定上述半模态页面。

核心代码如下：

import { TitleBar } from '../../../../common/TitleBar'
import { IntroductionTitle } from '../../../../common/IntroductionTitle'
import promptAction from '@ohos.promptAction';
import { BusinessError } from '@ohos.base';
import Logger from '../../../../util/Logger';

// 自定义半模态页面高度
const SIZE: number = 200;

@Extend(Text) function textStyle() {
  .fontFamily('HarmonyHeiTi-Medium')
  .fontSize(16)
  .fontColor('#182431')
  .textAlign(TextAlign.Start)
  .lineHeight(22)
  .fontWeight(500)
}

interface SheetSizes {
  medium: boolean;
  large: boolean;
  size200: boolean;
}

@Entry
@Component
struct BindSheetSample {
  @State isShow: boolean = false
  @State showDragBar: boolean = true;
  @State enableOutsideInteractive: boolean = true;
  @State popStyle: number = SheetType.BOTTOM;
  @State showClose: boolean = true;
  @State blurStyle: BlurStyle = BlurStyle.NONE;
  @State detentsArray: number[] = [];
  @State detents: [(SheetSize | Length), (SheetSize | Length)?, (SheetSize | Length)?] = [SheetSize.MEDIUM, SIZE];
  @State mediumSelected: boolean = true;
  @State largeSelected: boolean = false;
  @State size200Selected: boolean = true;
  @State mediumText: string = 'Medium';
  @State largeText: string = 'Large';
  @State size200Text: string = '200';
  private sheetSizes: SheetSizes = { medium: true, large: false, size200: true };

  @Builder myBuilder() {
    Column() {
    }
    .width('100%')
  }

  build() {
    Column() {
      TitleBar({ title: $r('app.string.global_bindSheet_menu') })
        .backgroundColor('#F1F3F5')
      Scroll() {
        Column() {
          Row() {
            Column() {
              Text($r('app.string.global_bindSheet_text_allow_interaction'))
                .fontSize(16)
                .fontColor('#000000')
                .fontWeight(500)
                .fontFamily('HarmonyHeiTi-Medium')
                .textAlign(TextAlign.Start)
                .width('70%')
              Text($r('app.string.global_bindSheet_text_desc'))
                .fontSize(14)
                .fontColor('#000000')
                .fontWeight(400)
                .fontFamily('HarmonyHeiTi')
                .textAlign(TextAlign.Start)
                .width('70%')
            }
            .margin({ left: 12, top: 6, bottom: 6 })
            .align(Alignment.Start)

            Blank()

            Toggle({ type: ToggleType.Switch, isOn: this.enableOutsideInteractive })
              .id('enable_interactive')
              .margin({ right: 12, top: 8, bottom: 8 })
              .onChange((isOn: boolean) => {
                if (isOn) {
                  this.enableOutsideInteractive = true;
                } else {
                  this.enableOutsideInteractive = false;
                }
              })
          }
          .backgroundColor('#ffffff')
          .borderRadius(24)
          .width('100%')

          Text($r('app.string.pop_height'))
            .lineHeight(19)
            .fontWeight(500)
            .fontFamily('HarmonyHeiTi-Medium')
            .fontSize(14)
            .width('100%')
            .direction(Direction.Ltr)
            .margin({ left: 26, top: 19.5, bottom: 9.5 })
            .fontColor($r('app.color.font_color_shallow'))

          Column() {
            Row() {
              Text(this.mediumText)
                .textStyle()
                .margin({ left: 12, top: 8, bottom: 8 })
              Blank()
              Checkbox()
                .select(this.mediumSelected)
                .borderRadius(4)
                .margin({ right: 12, top: 8, bottom: 8 })
                .onChange((value: boolean) => {
                  if (value) {
                    this.sheetSizes.medium = true;
                  } else {
                    this.sheetSizes.medium = false;
                  }
                })
            }
            .width('100%')
            .margin({ top: 4 })

            Divider()
              .strokeWidth(1)
              .margin(8)
              .color('#182431')
              .opacity(0.05)

            Row() {
              Text(this.largeText)
                .textStyle()
                .margin({ left: 12, top: 8, bottom: 8 })
              Blank()
              Checkbox()
                .select(this.largeSelected)
                .borderRadius(4)
                .margin({ right: 12, top: 8, bottom: 8 })
                .onChange((value: boolean) => {
                  if (value) {
                    this.sheetSizes.large = true;
                  } else {
                    this.sheetSizes.large = false;
                  }
                })
            }
            .width('100%')
            .margin({ top: 4 })

            Divider()
              .strokeWidth(1)
              .margin(8)
              .color('#182431')
              .opacity(0.05)

            Row() {
              Text(this.size200Text)
                .textStyle()
                .margin({ left: 12, top: 8, bottom: 8 })
              Blank()
              Checkbox()
                .select(this.size200Selected)
                .borderRadius(4)
                .margin({ right: 12, top: 8, bottom: 8 })
                .onChange((value: boolean) => {
                  if (value) {
                    this.sheetSizes.size200 = true;
                  } else {
                    this.sheetSizes.size200 = false;
                  }
                })
            }
            .width('100%')
            .margin({ top: 4, bottom: 4 })
          }
          .backgroundColor('#ffffff')
          .borderRadius(24)
          .margin({ top: 12 })
          .width('100%')

          Row() {
            Text($r('app.string.bindSheet_popup_style'))
              .textStyle()
              .margin({ left: 12, top: 8, bottom: 8 })
            Blank()
            Select([{ value: $r('app.string.bindSheet_default_popup') },
              { value: $r('app.string.bindSheet_centered_popup') },
              { value: $r('app.string.bindSheet_popup_appears') }])
              .id('popup_style')
              .selected(0)
              .value($r('app.string.bindSheet_default_popup'))
              .margin({ right: 12, top: 8, bottom: 8 })
              .fontColor('#182431')
              .onSelect((index: number) => {
                if (index === 0) {
                  this.popStyle = SheetType.BOTTOM;
                } else if (index === 1) {
                  this.popStyle = SheetType.CENTER;
                } else {
                  this.popStyle = SheetType.POPUP;
                }
              })
          }
          .backgroundColor('#ffffff')
          .borderRadius(24)
          .margin({ top: 20 })
          .width('100%')

          Row() {
            Text($r('app.string.bindSheet_icon'))
              .textStyle()
              .margin({ left: 12, top: 17, bottom: 17 })
            Blank()
            Toggle({ type: ToggleType.Switch, isOn: this.showClose })
              .margin({ right: 12, top: 17, bottom: 17 })
              .onChange((isOn: boolean) => {
                if (isOn) {
                  this.showClose = true;
                } else {
                  this.showClose = false;
                }
              })
          }
          .backgroundColor('#ffffff')
          .borderRadius(24)
          .margin({ top: 20 })
          .width('100%')

          Row() {
            Text($r('app.string.bindSheet_blurred_background_texture'))
              .textStyle()
              .margin({ left: 12, top: 17, bottom: 17 })
            Blank()
            Toggle({ type: ToggleType.Switch, isOn: false })
              .id('bindSheet_blur')
              .margin({ right: 12, top: 17, bottom: 17 })
              .onChange((isOn: boolean) => {
                if (isOn) {
                  this.blurStyle = BlurStyle.Thick;
                } else {
                  this.blurStyle = BlurStyle.NONE;
                }
              })
          }
          .backgroundColor('#ffffff')
          .borderRadius(24)
          .margin({ top: 20 })
          .width('100%')

          Blank()
          Button($r('app.string.bindSheet_popup_modal_interface'),
            { type: ButtonType.Normal, stateEffect: true })
            .id('bindSheet_button')
            .borderRadius(24)
            .width('86.7%')
            .height('5.1%')
            .margin({ left: 24, right: 24, bottom: 72 })
            .bindSheet($$this.isShow, this.myBuilder(),
              {
                enableOutsideInteractive: this.enableOutsideInteractive,
                dragBar: this.showDragBar,
                backgroundColor: '#FFFFFF',
                detents: this.detents,
                blurStyle: this.blurStyle,
                showClose: this.showClose,
                title: { title: "Title" },
                preferType: this.popStyle,
                shouldDismiss: ((sheetDismiss: SheetDismiss) => {
                  // 弹出弹窗
                  try {
                    promptAction.showDialog({
                      message: $r('app.string.bindSheet_close_modal'),
                      buttons: [
                        {
                          text: $r('app.string.bindSheet_close_cancel'),
                          color: '#0A59F7'
                        },
                        {
                          text: $r('app.string.bindSheet_close_confirm'),
                          color: '#0A59F7'
                        }
                      ]
                    }, (err, data) => {
                      if (err) {
                        Logger.error('showDialog err: ' + err);
                        return;
                      }
                      if (data.index === 1) {
                        this.detentsArray.length = 0;
                        this.detents = [SheetSize.MEDIUM, SIZE];
                        sheetDismiss.dismiss();
                      }
                    });
                  } catch (error) {
                    let message = (error as BusinessError).message;
                    let code = (error as BusinessError).code;
                    Logger.error('showDialog args error code is' + code, 'message is' + message);
                  };
                })
              })
            .onClick(() => {
              this.isShow = true
              if (this.sheetSizes.medium) {
                this.detentsArray.push(SheetSize.MEDIUM);
              }
              if (this.sheetSizes.large) {
                this.detentsArray.push(SheetSize.LARGE);
              }
              if (this.sheetSizes.size200) {
                this.detentsArray.push(SIZE);
              }
              for (let i = 0; i < this.detentsArray.length; i++) {
                this.detents[i] = this.detentsArray[i];
              }
            })
        }
        .backgroundColor('#f1f3f5')
        .constraintSize({ minHeight: '100%' }) // Let the minHeight of the component cover screen at least
        .height('100%')
      }
      .backgroundColor('#f1f3f5')
      .height('100%')
      .padding({ left: 12, right: 12, bottom: 12, top: 12 })
    }
  }
}
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.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.
297.
298.
299.
300.
301.
302.
303.
304.
305.
306.
307.
308.
309.
310.
311.
312.
313.
314.
315.
316.
317.
318.
319.
320.
321.
322.
323.
324.
325.
326.

分类

OpenHarmony

标签

OpenHarmony

51CTO

51CTO博客

51CTO学堂

OpenHarmony应用如何使用bindSheet属性为组件绑定半模态页面原创

简介：

文档环境：

演示demo：

目录

订阅鸿蒙技术特刊，精选内容抢先看

51CTO

51CTO博客

51CTO学堂

OpenHarmony应用如何使用bindSheet属性为组件绑定半模态页面 原创

简介：

文档环境：

演示demo：

目录

订阅鸿蒙技术特刊，精选内容抢先看

OpenHarmony应用如何使用bindSheet属性为组件绑定半模态页面原创