HarmonyOS 半模态相关使用?

1.登录页出现转场方式应该是半模态,但是通过查询资料只能通过bindSheet属性进行绑定,而bindSheet里需要声明builder,builder是是自定义组件的自定义构建函数,在这里builder应该是我们的登录页,将我们的页面变为某个组件的自定义构建函数,这并不是很合理,除了这种方式还有其余方式达到半模态吗?

2.list中某几个item点击的时候希望弹出弹窗,希望弹出这些弹窗的效果是半模态,如果使用bindsheet进行实现的话,会出现两个弹窗。

阅读 617
1 个回答

问题1参考以下demo:https://gitee.com/harmonyos-cases/cases/tree/master/CommonAppDevelopment/feature/multimodaltransion

问题2由于使用了ForEach为每一个ListItem都绑定了半模态页面,同时每一个半模态页面的显示控制都是同一个字段“isShow1”。这样就会出现“isShow1”改变后,显示多个半模态页面

interface arrData {
  itemData: ItemInData[];
}

class ItemInData {
  name: string = "";

  constructor(name: string) {
    this.name = name;
  }
}

@Entry
@Component
struct SheetTransitionExample {
  showItem: ItemInData = new ItemInData("")
  arrData: arrData[] = [
    {
      itemData: [new ItemInData('1组1')]
    },
    {
      itemData: [new ItemInData('2组1'), new ItemInData('2组2'), new ItemInData('2组3')]
    }
  ]
  @State isShow: boolean = false;

  @Builder
  myBuilder(name: string) {
    Column() {
      Button(name)
        .margin(10)
        .fontSize(20)

    }
    .width('100%')

  }

  build() {
    Column() {
      /**
       * TODO: 知识点: 通过bindSheet属性为组件绑定半模态页面,由于半模态必须绑定组件,
       * 此处绑定无样式的Text组件作为开屏半模态展示。
       */
      Text().bindSheet($$this.isShow, this.myBuilder(this.showItem.name), {
        showClose: false,
        preferType: SheetType.CENTER,
        onWillAppear: () => {
          console.log("BindSheet onWillAppear." + this.showItem.name)
        },
        onWillDisappear: () => {
          console.log("BindSheet onWillDisappear."+ this.showItem.name)
        }
      })

      List({ space: 20 }) {
        ForEach(this.arrData, (item: arrData, groupId: number) => {
          ListItemGroup() {
            ForEach(item.itemData, (project: ItemInData, rowIdOfGroup: number) => {
              ListItem() {
                Button(project.name).backgroundColor(Color.Black)
                  .width("100%")
                  .padding(10)
              }
              .onClick(() => {
                this.isShow = true;
                this.showItem = project;
              })
            }, (item: string) => item)
          }
          .divider({ strokeWidth: 0.5, color: '#CFD6D6' }) // 每行之间的分界线
        })
      }.backgroundColor(Color.Green)
    }
    .justifyContent(FlexAlign.Start)
    .width('100%')
    .height('100%')
  }
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进