HarmonyOS开发者社区

先把结论说前面哈：
ArkUI 的 Sheet（bindSheet 半模态）本身没有类似 zIndex 的层级控制接口，没法直接“把 Sheet 提到 FAB 上面、又压在导航栏下面”。
要满足你这三个条件：

1. 顶部导航栏永远在最上层 ✅

2. 底部 Sheet 不被 FAB 挡住 ✅

3. 还能正常点击 Sheet 里的按钮 ✅

需要改布局方案，而不是调 Sheet 的层级。下面给你两套实战可落地的写法 👇

方案一：不用系统 bindSheet，自定义 BottomSheet + zIndex（更可控，推荐）

思路：

• 导航栏放在最外层 Column，谁都盖不住它。

• 中间业务内容 + FAB + 自定义 BottomSheet 放在一个 Stack 里，通过 zIndex 控制谁在上面。

• Sheet 弹出时：

  • 显示一层全屏遮罩吃掉点击事件；

  • 显示底部面板；

  • 隐藏 FAB（或者让 FAB zIndex 比面板小）。

简化代码示例（逻辑重点在层级控制，变量名你可以按自己项目改）：

@Entry
@Component
struct DemoPage {
  @State sheetVisible: boolean = false;

  build() {
    Column() {
      // 1. 顶部导航栏：最外层，天然在最上层
      AppBar({ title: 'Demo Page' })

      // 2. 页面主体 + FAB + 自定义 BottomSheet
      Stack({ alignContent: Alignment.BottomEnd }) {
        // 业务内容
        Column() {
          // TODO: your business UI
        }
        .width('100%')
        .height('100%')

        // 悬浮按钮（Sheet 打开时隐藏）
        if (!this.sheetVisible) {
          Button('FAB')
            .margin({ right: 24, bottom: 24 })
            .zIndex(90) // 只需要比内容高
            .onClick(() => {
              this.sheetVisible = true;
            })
        }

        // 自定义 BottomSheet：遮罩 + 面板
        if (this.sheetVisible) {
          // 2.1 遮罩：吃掉底部内容和 FAB 的点击
          Column() {}
            .width('100%')
            .height('100%')
            .backgroundColor('#80000000') // 半透明
            .zIndex(99)
            .onClick(() => {
              this.sheetVisible = false;
            })

          // 2.2 底部面板：zIndex 要比 FAB 和遮罩更高
          Column() {
            Text('标题')
              .fontSize(20)
              .margin({ bottom: 16 })

            Row({ space: 12 }) {
              Button('取消')
                .layoutWeight(1)
                .onClick(() => this.sheetVisible = false)

              Button('确认')
                .layoutWeight(1)
                .onClick(() => {
                  // TODO: 确认逻辑
                  this.sheetVisible = false;
                })
            }
          }
          .width('100%')
          .height('40%') // 控制弹窗高度，不会顶到导航栏
          .borderRadius({ topLeft: 16, topRight: 16 })
          .backgroundColor('#FFFFFF')
          .zIndex(100) // 最大：保证一定在 FAB 上面
        }
      }
      .expand()
    }
  }
}

这样可以同时满足：

• 导航栏：在最外层 Column 里，不在 Stack 内，自然不会被 BottomSheet 盖住。

• FAB：在 Stack 里，Sheet 弹出后要么隐藏，要么 zIndex 比 Sheet 小，不会挡住 Sheet 的按钮。

• Sheet：zIndex(100) + 遮罩，所有点击都先到 Sheet，按钮可正常点击。

方案二：继续用 bindSheet，但配合 FAB 显隐 + 高度控制（能用，但不如方案一灵活）

如果你必须用官方的 半模态 bindSheet（比如想要默认的拖拽扩展/回弹动效），那目前 API 里 没有类似 zIndex 的配置项，层级是框架内部控制的。
能做的就是“配合”它：

1. FAB 不要做成应用级 / 子窗口浮层

   • 如果你用 OverlayManager / showInSubWindow(true) / 全局子窗口 来做 FAB，那它是“窗体级”的，层级会比页内的 Sheet 更高，Sheet 永远盖不住它。

   • 官方 FAQ 也有类似问题（bindSheet 遮挡 tab 栏的场景，建议改成自定义弹窗来控制层级）。(51CTO Ost)

   • 建议把 FAB 收回到当前页面的 Stack/Column 布局里，让它跟普通组件一样参与页面层级，而不是独立窗口。

2. 在 Sheet 打开（isShow = true）时隐藏 FAB

   伪代码示例（假设用的是某个封装好的 bindSheet）：

   @State sheetVisible: boolean = false;
   
   build() {
     Column() {
       AppBar({ title: 'Demo' })
   
       // 中间业务内容…
       Column() {
         // ...
       }
       .bindSheet(this.sheetVisible, SheetContent, {
         // options: height/dragBar/onAppear/onDisappear...
       })
   
       // FAB，跟随 isShow 状态显隐
       Button('FAB')
         .position({ x: 0, y: 0 }) // 你的定位方式
         .zIndex(90)
         .visibility(this.sheetVisible ? Visibility.Hidden : Visibility.Visible)
     }
   }
   

   • 这样 Sheet 出现时 FAB 就不再参与事件分发，当然就不会“挡住” Sheet 的按钮了。

3. 通过 Sheet 的高度 / preferType 控制不要盖住导航栏

   bindSheet 的封装通常会提供 height 或 preferType 之类的选项（API 里有专门的 height 配置）。(CSDN)

   • 你可以设一个固定高度，比如 height: '60%'，只覆盖屏幕中下部区域；

   • 或者在具体封装里用 SheetType.MEDIUM 这类中档位，避免弹窗拉满顶到导航栏。

设计规范里也提到：半模态、弹出框等应避让导航条，避免交互误触，一般通过高度和布局来实现，而不是强行压住导航栏。(掘金)

小结一下（帮你选方案 😎）

• 如果你想要完全掌控层级（导航栏永远在最上，Sheet 在 FAB 上，业务随便叠）：
  ➜ 用 方案一：自定义 BottomSheet + Stack + zIndex，完全可控，而且逻辑简单好维护。

• 如果你更看重系统自带的半模态拖拽体验，不想自己写动画：
  ➜ 保留 bindSheet，配合：

  • FAB 变成页内组件；

  • Sheet 打开时隐藏 FAB；

  • 控制 Sheet 高度，避免盖住导航栏。

两套方案都能满足“Sheet 内按钮正常点击、不被 FAB 遮挡 + 导航栏保持最上层”的需求，你可以先按自己项目结构试一个。