输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
RelativeContainer
CustomDialogController
animateTo
CTRL+K
文档管理中心

HarmonyOS

输入关键字搜索
开发者能力认证
鸿蒙高校创新赛
HarmonyOS 7
animation
HarmonyOS行业解决方案
layoutWeight
HarmonyOS模板&组件
bindPopup
bindsheet
RelativeContainer
CustomDialogController
animateTo
CTRL+K
FAQ
FAQ应用框架开发UI框架UI界面页面底部弹窗显示不全

页面底部弹窗显示不全

更新时间: 2026-06-26 09:07
本文导读

问题现象

页面底部的弹窗内容显示不全。

背景知识

  • bindSheet：给组件绑定半模态页面，点击后显示模态页面。
  • Scroll：可滚动的容器组件，当子组件的布局尺寸超过父组件的尺寸时，内容可以滚动。

问题定位

排查应用半模态面板高度设置是否合理。检查bindSheet属性中height的值。如果高度设置不合理，就会导致页面底部弹窗显示不全。

收起
自动换行
深色代码主题
复制
  1.   build() {
  2.     Column() {
  3.       Button('bindSheet测试')
  4.         .onClick(()=>{
  5.           this.isShow = true
  6.         })
  7.         .bindSheet($$this.isShow, this.settingBuilder, {
  8.           height: 65,  // 高度设置不合理导致显示不全
  9.           backgroundColor: Color.White,
  10.         })
  11.     }
  12.     .height('100%')
  13.     .width('100%')
  14.     .backgroundColor(Color.Gray)
  15.     .padding({top: 50, bottom: 50})
  16.   }

分析结论

半模态面板高度不足以容纳全部内容，导致底部内容被截断，显示不全。

修改建议

建议调整半模态面板高度，尽量使用百分比高度，将半模态页面完整展示出来。同时给半模态页面添加Scroll组件，可以上下滑动查看页面内容。

收起
自动换行
深色代码主题
复制
  1. @Entry
  2. @Component
  3. struct TestDemo {
  4.   @Builder
  5.   settingBuilder() {
  6.     Setting();
  7.   }
  8. 

  9.   @State isShow: boolean = false; // 控制模态窗显隐状态
  10. 

  11.   build() {
  12.     Column() {
  13.       Button('bindSheet测试')
  14.         .margin({ top: 60 })
  15.         .onClick(() => {
  16.           this.isShow = true;
  17.         })
  18.         .bindSheet($$this.isShow, this.settingBuilder, {
  19.           height: '55%',
  20.           backgroundColor: Color.White,
  21.         });
  22.     }
  23.     .height('100%')
  24.     .width('100%')
  25.     .backgroundColor(Color.White);
  26.   }
  27. }
  28. 

  29. @Component
  30. struct Setting {
  31.   private item: string[] = [];
  32. 

  33.   aboutToAppear(): void {
  34.     for (let index = 1; index <= 30; index++) {
  35.       this.item.push(`设置${index}`);
  36.     }
  37.   }
  38. 

  39.   build() {
  40.     Column() {
  41.       Row() {
  42.         Text('标题')
  43.           .fontWeight(FontWeight.Bold)
  44.           .fontSize(25)
  45.           .margin({ left: 16, top: 30 });
  46.       }
  47.       .justifyContent(FlexAlign.Start)
  48.       .width('100%');
  49. 

  50.       Scroll() {
  51.         Column() {
  52.           ForEach(this.item, (item: string) => {
  53.             Row() {
  54.               Text(item);
  55.               Checkbox();
  56.             }
  57.             .justifyContent(FlexAlign.SpaceBetween)
  58.             .width('100%')
  59.             .height(60);
  60. 

  61.             Divider()
  62.               .width('100%');
  63.           });
  64.         }
  65.         .justifyContent(FlexAlign.Start)
  66.         .constraintSize({ minHeight: '100%' })
  67.         .width('100%')
  68.         .padding({ left: 16, right: 16, top: 10 });
  69.       }
  70.       .width('100%')
  71.       .scrollBar(BarState.Off)
  72.       .layoutWeight(1);
  73.     }
  74.     .width('100%');
  75.   }
  76. }
列表展开动效异常，与正在下移的组件重叠
页面跳转时，有渐入渐出的动效
相关推荐
文档半模态弹窗常见的开发问题
文档如何在横屏时从右边弹出半模态页面
文档如何设置半模态转场弹窗与设备屏幕底部的边距
文档绑定半模态页面（bindSheet）
文档应用分屏模式下，页面不可滑动，底部内容无法查看
文档用户关闭键盘后，输入框未下滑吸底，导致底部出现空白遮挡页面
文档实现UI组件跟随bindSheet高度变化
文档如何在bindSheet中实现页面切换的效果
文档半模态弹窗高度问题
文档如何在子窗口为主窗口打开半模态弹窗
简体中文
华为开发者联盟 版权所有 ©2026
问题反馈
使用条款
华为开发者联盟用户协议
关于华为开发者联盟与隐私的声明
Cookies
开源软件声明
在 FAQ 中进行搜索
请输入您想要搜索的关键词