HarmonyOS 鸿蒙Next中求助，半模态弹窗不依赖UI组件的场景使用官方文档updateBindSheet的案例代码，点击更新按钮弹窗会缩回问题

HarmonyOS 鸿蒙Next中求助，半模态弹窗不依赖UI组件的场景使用官方文档updateBindSheet的案例代码，点击更新按钮弹窗会缩回问题

  1. import { FrameNode, ComponentContent } from “@kit.ArkUI”;

  2. import { BusinessError } from ‘@kit.BasicServicesKit’;

  3. class Params {

  4. text: string = “”;

  6. constructor(text: string) {

  7. this.text = text;

  8. }

  9. }

  10. let contentNode: ComponentContent<Params>;

  11. let gUIContext: UIContext;

  12. @Builder

  13. function buildText(params: Params) {

  14. Column() {

  15. Text(params.text)

  16. Button('Update BindSheet')

  17.   .fontSize(20)

  18.   .onClick(() => {

  19.     gUIContext.updateBindSheet(contentNode, {

  20.       backgroundColor: Color.Pink,

  21.     }, true)

  22.     .then(() => {

  23.       console.info('updateBindSheet success');

  24.     })

  25.     .catch((err: BusinessError) => {

  26.       console.info('updateBindSheet error: ' + err.code + ' ' + err.message);

  27.     })

  28.   })

  30. Button('Close BindSheet')

  31.   .fontSize(20)

  32.   .onClick(() => {

  33.     gUIContext.closeBindSheet(contentNode)

  34.       .then(() => {

  35.         console.info('closeBindSheet success');

  36.       })

  37.       .catch((err: BusinessError) => {

  38.         console.info('closeBindSheet error: ' + err.code + ' ' + err.message);

  39.       })

  40.   })

  41. }

  42. }

  43. @Entry

  44. @Component

  45. struct UIContextBindSheet {

  46. @State message: string = ‘BindSheet’;

  48. aboutToAppear() {

  49. gUIContext = this.getUIContext();

  50. contentNode = new ComponentContent(this.getUIContext(), wrapBuilder(buildText), new Params(this.message));

  51. }

  53. build() {

  54. RelativeContainer() {

  55.   Column() {

  56.     Button('Open BindSheet')

  57.       .fontSize(20)

  58.       .onClick(() => {

  59.         let uiContext = this.getUIContext();

  60.         let uniqueId = this.getUniqueId();

  61.         let frameNode: FrameNode | null = uiContext.getFrameNodeByUniqueId(uniqueId);

  62.         let targetId = frameNode?.getFirstChild()?.getUniqueId();

  63.         uiContext.openBindSheet(contentNode, {

  64.           height: SheetSize.MEDIUM,

  65.           backgroundColor: Color.Green,

  66.           title: { title: "Title", subtitle: "subtitle" }

  67.         }, targetId)

  68.           .then(() => {

  69.             console.info('openBindSheet success');

  70.           })

  71.           .catch((err: BusinessError) => {

  72.             console.info('openBindSheet error: ' + err.code + ' ' + err.message);

  73.           })

  74.       })

  75.   }

  76.   .height('100%')

  77.   .width('100%')

  78. }

  79. }

  80. }

官方文档网址：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-uicontext#updatebindsheet12


更多关于HarmonyOS 鸿蒙Next中求助，半模态弹窗不依赖UI组件的场景使用官方文档updateBindSheet的案例代码，点击更新按钮弹窗会缩回问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

鸿蒙Next中半模态弹窗使用updateBindSheet时出现回缩问题，可能是生命周期管理导致。确保SheetController状态正确维护，避免在onClick事件中过早释放。检查sheetHeight参数设置是否符合预期，动态高度变化需同步更新。

可尝试在SheetController的onUpdate回调中手动维持展开状态，或使用async/await确保更新操作完成后再执行其他逻辑。若使用@State修饰控制器变量，需确认响应式更新未触发意外重建。

更多关于HarmonyOS 鸿蒙Next中求助，半模态弹窗不依赖UI组件的场景使用官方文档updateBindSheet的案例代码，点击更新按钮弹窗会缩回问题的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是由于updateBindSheet方法的第三个参数animate设置为true导致的。当设置为true时，弹窗会以动画形式更新，表现为先缩回再展开。

解决方法很简单，将updateBindSheet调用中的animate参数改为false即可：

gUIContext.updateBindSheet(contentNode, {
  backgroundColor: Color.Pink,
}, false)  // 改为false

这样弹窗会直接更新样式而不会有缩回动画。如果需要保留动画效果但不想看到缩回动作，可以考虑自定义动画过渡效果。

另外，确保contentNode在更新时仍然有效，避免因节点失效导致的异常行为。

回到顶部