HarmonyOS鸿蒙Next中Sheet组件在多个bindSheet链式调用时，首个点击无响应，需要先触发其他Sheet才能显示

HarmonyOS鸿蒙Next中Sheet组件在多个bindSheet链式调用时，首个点击无响应，需要先触发其他Sheet才能显示 【问题描述】：我在个人中心页面中使用3个bindSheet链式绑定不同对话框，首次点击"任务一"或"任务二"无反应，必须先点击"任务三"后再点击空白区域，其他两个Sheet才能逐个显示。已尝试aboutToAppear预初始化和点击事件延迟，问题依然存在

【问题现象】： 图片 图片


更多关于HarmonyOS鸿蒙Next中Sheet组件在多个bindSheet链式调用时，首个点击无响应，需要先触发其他Sheet才能显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

使用bindSheet半模态时，如果在同一组件绑定三个bindSheet调用，会使前两个半模态被覆盖，无法即时响应。需要分开单独的组件各自绑定，或者如果使用foreach展示列表，可以封装一下，在点击事件中写一个判断展示不同内容

@Entry
@Component
struct TestPage {
  @State CursNumber: string[] = ['任务一', '任务二', '任务三']; // 添加数据源
  @State index: number = -1; // 添加边框宽度状态变量
  @State isShow: boolean = false;
  @State buttonText: string = '';
  @State inputText: string = '';
  @State contentText: string = '';

  @Builder
  textButtonBuilder(text: string) {
    Column() {
      Button(text)
        .margin(10)
        .fontSize(20)
    }
  }

  @Builder
  textInputBuilder(text: string) {
    Column() {
      TextInput({ placeholder: text })
        .margin(10)
        .fontSize(20)
    }
  }

  @Builder
  textBuilder(text: string) {
    Column() {
      Text(text)
        .margin(10)
        .fontSize(20)
    }
  }

  @Builder
  AllBuilder() {
    Column() {
      if (this.index === 0) {
        this.textInputBuilder(this.inputText)
      } else if (this.index === 1) {
        this.textButtonBuilder(this.buttonText)
      } else if (this.index === 2) {
        this.textBuilder(this.contentText)
      }
    }
  }

  build() {
    Column() {
      ForEach(this.CursNumber, (it: string, index: number) => {
        Text(it)
          .fontSize(18)
          .width('100%')
          .height(60)
          .backgroundColor(Color.Grey)
          .fontColor(Color.Black)
          .textAlign(TextAlign.Center)
          .margin(10)
          .border({ width: this.index === index ? 2 : 0 })
          .borderRadius(10)
          .borderColor('rgba(94, 223, 246, 1.00)')
          .onClick(() => {
            this.isShow = true;
            this.index = index; // 设置边框
            switch (index) {
              case 0:
                this.inputText = '任务一';
                break;
              case 1:
                this.buttonText = '任务二';
                break;
              case 2:
                this.contentText = '任务三';
                break;
            }
          })
      }, (it: string) => it)
    }
    .width('100%')
    .margin({ top: 20 })
    .padding(10)
    .justifyContent(FlexAlign.Center)
    .bindSheet($$this.isShow, this.AllBuilder(), {
      height: 300,
      backgroundColor: Color.White,
      blurStyle: BlurStyle.Thick,
      showClose: true,
      title: { title: "title", subtitle: "subtitle" },
      preferType: SheetType.CENTER,

      onWillDismiss: ((dismissSheetAction: DismissSheetAction) => {
        if (dismissSheetAction.reason == DismissReason.SLIDE_DOWN ||
          dismissSheetAction.reason == DismissReason.CLOSE_BUTTON) {
          dismissSheetAction.dismiss(); //注册dismiss行为
        }
      }),

      onWillSpringBackWhenDismiss: ((SpringBackAction: SpringBackAction) => {
        SpringBackAction.springBack();
      }),
    })
  }
}

更多关于HarmonyOS鸿蒙Next中Sheet组件在多个bindSheet链式调用时，首个点击无响应，需要先触发其他Sheet才能显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


弹窗绑在一起冲突了，你好小伙伴可以这样玩儿

图片

export enum BuilderConstEnum {
  BUILDER_ONE = 'BuilderOne',
  BUILDER_TWO = 'BuilderTwo',
  BUILDER_THREE = 'BuilderThree',
}
@Builder
function
myBuilder1() {
  Column() {
    Button(`任务一`)
      .margin(10)
      .fontSize(20)
  }
  .width('100%')
}

@Builder
function
myBuilder2() {
  Column() {
    Button(`任务二`)
      .margin(10)
      .fontSize(20)
  }
  .width('100%')
}

@Builder
function
myBuilder3() {
  Column() {
    Button(`任务三`)
      .margin(10)
      .fontSize(20)
  }
  .width('100%')
}


export const builderArr: Map<string, WrappedBuilder<[]>> = new Map()

builderArr.set(BuilderConstEnum.BUILDER_ONE, wrapBuilder(myBuilder1))
builderArr.set(BuilderConstEnum.BUILDER_TWO, wrapBuilder(myBuilder2))
builderArr.set(BuilderConstEnum.BUILDER_THREE, wrapBuilder(myBuilder3))


@Component
export struct SheetTransitionExample {
  @State isShow: boolean = false;
  @State bindSheetEnum: Record<number , string> = {
    1: 'BuilderOne',
    2: 'BuilderTwo',
    3: 'BuilderThree',
  }
  @State curIndex: number = 1

  build() {
    Column() {
      Column() {
        ForEach([1, 2, 3], (item: number) => {
          Button(`任务${item}`)
            .onClick(() => {
                this.isShow = true;
                this.curIndex = item
            })
            .fontSize(20)
            .margin(10)
            .id(item.toString())
            .bindSheet(this.isShow  &&  this.curIndex === item, builderArr.get(this.bindSheetEnum[item])?.builder(), {
              detents: [SheetSize.MEDIUM, SheetSize.LARGE, 200],
              blurStyle: BlurStyle.Thick,
              showClose: true,
              title: { title: "title", subtitle: "subtitle" },
              onWillDismiss: ((dismissSheetAction: DismissSheetAction) => {
                if (dismissSheetAction.reason == DismissReason.SLIDE_DOWN) {
                  dismissSheetAction.dismiss(); //注册dismiss行为
                }
                this.isShow = false
              }),
            })
        })

      }
      .justifyContent(FlexAlign.Start)
      .width('100%')
      .height('100%')
    }
  }
}

在HarmonyOS Next中，多个bindSheet链式调用时，首个点击无响应的问题，是由于Sheet组件的状态管理机制导致的。当多个Sheet通过链式调用绑定到同一触发源时，首个Sheet的显示状态可能未正确初始化。解决方法是使用独立的@State变量分别控制每个Sheet的显示状态，避免状态依赖。确保每个Sheet的显示控制逻辑相互独立，即可解决该问题。

这个问题通常是由于Sheet组件的状态管理或绑定时机导致的。在链式调用多个bindSheet时，首个Sheet可能因为状态未正确初始化而无法响应。

核心原因：

  1. 状态同步问题：多个Sheet绑定可能存在依赖关系，首个Sheet的状态未就绪。
  2. 事件冒泡/捕获冲突：点击事件可能被其他元素拦截或未正确触发。

解决方案：

  1. 使用Promise或setTimeout确保初始化顺序：
// 在点击事件中确保前序Sheet已就绪
onClickFirst() {
  setTimeout(() => {
    this.sheet1Controller.open();
  }, 0);
}
  1. 检查Sheet的绑定顺序和条件：
  • 确保所有Sheet都在组件初始化时完成绑定。
  • 避免在条件渲染中动态绑定Sheet。
  1. 使用@State管理显示状态：
[@State](/user/State) isSheet1Show: boolean = false;

// 通过状态控制显示
onClickFirst() {
  this.isSheet1Show = true;
}
  1. 检查事件传递：
  • 确认点击事件没有在父组件被阻止。
  • 尝试使用@Prop或@Link传递控制参数。

如果问题仍存在，建议检查HarmonyOS Next的API版本是否最新，并确认Sheet组件的使用是否符合当前版本的规范。

回到顶部