首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >鸿蒙Next 底部弹框绑定半模态页面(bindSheet)

鸿蒙Next 底部弹框绑定半模态页面(bindSheet)

原创
作者头像
用户4773577
修改2025-06-28 20:52:25
修改2025-06-28 20:52:25
1860
举报

半模态页面(bindSheet)默认是模态形式的非全屏弹窗式交互页面,允许部分底层父视图可见,帮助用户在与半模态交互时保留其父视图环境。

如果sheet布局是个list可滑动布局,需要先了解一下嵌套滚动

NestedScrollMode

SELF_ONLY 只自身滚动,不与父组件联动。

SELF_FIRST 自身先滚动,自身滚动到边缘以后父组件滚动。

PARENT_FIRST 父组件先滚动,父组件滚动到边缘以后自身滚动。

PARALLEL 自身和父组件同时滚动。

代码语言:javascript
复制
import { OpenCustomDialogUtil, Params } from '../utils/DialogUtil'
@Entry
@Component
struct SheetDemo {
  @State isShowSheet: boolean = false
  private items: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18]
  @Builder
  SheetBuilder() {
    Column() {
      // 第一步:自定义滚动容器
      List({ space: '10vp' }) {
        ForEach(this.items, (item: number) => {
          ListItem() {
            Text(String(item)).fontSize(16).fontWeight(FontWeight.Bold)
          }.width('90%').height('80vp').backgroundColor('#ff53ecd9').borderRadius(10)
        })
      }
      .alignListItem(ListItemAlign.Center)
      .margin({ top: '10vp' })
      .width('100%')
      .height(300)
      .nestedScroll({
        scrollForward: NestedScrollMode.SELF_FIRST,
        scrollBackward: NestedScrollMode.SELF_FIRST,
      })

      Text("非滚动区域")
        .width('100%')
        .backgroundColor(Color.Gray)
        .layoutWeight(1)
        .textAlign(TextAlign.Center)
        .align(Alignment.Top)
    }.width('100%').height('100%').backgroundColor(Color.White)
  }
  build() {
    Column() {
      Button('Open Sheet').width('90%').height('80vp')
        .onClick(() => {
          this.isShowSheet = !this.isShowSheet
        })
        .bindSheet($$this.isShowSheet, this.SheetBuilder(),
          {
            //页面的切换高度档位
            detents: [SheetSize.MEDIUM, SheetSize.LARGE],
            // height:600,
            showClose: false,//是否显示关闭图标
            // dragBar: false,//是否显示控制条
            // title: { title: '嵌套滚动场景' },
            //CONTINUOUS 在滑动过程中持续更新内容显示区域
            //FOLLOW_DETENT 滑动结束后更新内容显示区域
            scrollSizeMode: ScrollSizeMode.FOLLOW_DETENT,
            //交互式关闭回调函数
            onWillDismiss: ((DismissSheetAction: DismissSheetAction) => {
              //关闭二次确认弹框,使用我们之前定义的全局openCustomDialog
             let parms:Params=new Params('提示','是否选择关闭半模态',()=>{
                OpenCustomDialogUtil.closeDialog()
              },()=>{
               DismissSheetAction.dismiss()
               OpenCustomDialogUtil.closeDialog()
              })
              OpenCustomDialogUtil.init(this.getUIContext(),parms);
              OpenCustomDialogUtil.openDialog()
            })
          })
    }.width('100%').height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档