半模态面板是一种介于模态窗口和非模态窗口之间的设计元素,常用于需要用户注意但不完全阻断用户操作的场景。半模态面板应允许用户通过点击面板外部区域或特定的关闭按钮来关闭,且面板内的操作应尽量简化,避免复杂的交互流程。半模态的使用在手机端、平板及电脑设备中都极为广泛,在 HarmonyOS NEXT 中的半模态窗口会跟随设备屏幕和应用窗口的展示比例进行适当的布局适配,为用户提供最佳的使用体验。通过bindSheet属性为组件绑定半模态页面,在组件插入时可通过设置自定义或默认的内置高度确定半模态大小。

1.半模态属性bindSheet(isShow: Optional<boolean>, builder: CustomBuilder, options?: SheetOptions): T

  • isShow:是否显示半模态页面。建议使用$$双向绑定变
  • builder:配置半模态页面内容,自定义页面。
  • options:配置半模态页面的可选属性。(常用的属性包含height:半模态页面高度,detents:半模态页面的切换高度档位。radius:设置半模态页面圆角半径。title:半模态主题,交互回调函数等)

2.使用案例

import { window } from '@kit.ArkUI';

@Entry
@Component
struct OnePage {
  @State message: string = 'Hello World';
  @State isShow:boolean=false

  aboutToAppear(): void {
    (AppStorage.get('windowClass') as window.Window).setWindowBackgroundColor('#d5d5d5')
  }

  build() {
    RelativeContainer() {
      Text(this.message)
        .id('OnePageHelloWorld')
        .fontSize($r('app.float.page_text_font_size'))
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .onClick(() => {
          this.message = 'Welcome';
          this.isShow=true
        })
        .bindSheet($$this.isShow,this.myBuilder(),{
          height:'50%',
          radius:{topLeft:10,topRight:10},
          //detents:[SheetSize.MEDIUM, SheetSize.LARGE, 100],
          enableHoverMode:true,
          onAppear:()=>{
            console.log("BindSheet onAppear.");

          },
          onWillAppear:()=>{
            console.log("BindSheet onWillAppear.");
          },

          },
          onWillDisappear:()=>{
             console.log("BindSheet onWillDisappear.");

          },
          onWillDismiss:(dismissSheetAction: DismissSheetAction)=>{
            if (dismissSheetAction.reason == DismissReason.SLIDE_DOWN) {
              dismissSheetAction.dismiss(); //注册dismiss行为
            }
          },
          onWillSpringBackWhenDismiss: ((SpringBackAction: SpringBackAction) => {
            //没有注册springBack,下拉半模态页面无回弹行为
            //SpringBackAction.springBack();
          })
        })
    }
    .expandSafeArea([SafeAreaType.KEYBOARD],[SafeAreaEdge.TOP,SafeAreaEdge.BOTTOM])
    .height('100%')
    .width('100%')
  }

  @Builder
  myBuilder() {
    Column() {
      Button("change height")
        .margin(10)
        .fontSize(20)
        .onClick(() => {
          //this.sheetHeight = 500;
        })

      Button("Set Illegal height")
        .margin(10)
        .fontSize(20)
        .onClick(() => {
          //this.sheetHeight = -1;
        })

      Button("close modal 1")
        .margin(10)
        .fontSize(20)
        .onClick(() => {
          //this.isShow = false;
        })
    }
    .width('100%')
    .height('100%')
  }
}

Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐