ArkUI bindContentCover：全屏盖上来，别把它当普通跳转

今天我们用 bindContentCover 做一个全屏覆盖层。

全屏覆盖适合临时进入一个完整视图，比如阅读、预览、确认一大块内容。它看起来像铺满了屏幕，但本质上还是覆盖层，所以这篇只讲打开、展示和关闭。

准备显示开关

先用一个布尔值控制覆盖层是否显示。

@State showCover: boolean = false

点击按钮时设为 true，覆盖层里的关闭按钮再设回 false。

写全屏内容

内容仍然放在 builder 里。

@Builder
coverContent() {
  Column() {
    Row() {
      Text('沉浸阅读')
      Blank()
      Button('关闭')
        .onClick(() => {
          this.showCover = false
        })
    }
  }
  .width('100%')
  .height('100%')
}

这里我们给它一个清楚的标题和关闭按钮。全屏内容越大，越要让用户知道怎么收回来。

绑定全屏覆盖层

页面按钮上绑定 bindContentCover。

Button('打开全屏覆盖层')
  .onClick(() => {
    this.showCover = true
  })
  .bindContentCover(this.showCover, this.coverContent, {
    modalTransition: ModalTransition.DEFAULT
  })

这篇只用默认转场，不额外加复杂动画。先把覆盖层本身讲清楚，后面真要做复杂页面流转，再单独处理。

你可以观察一下自己的应用：哪些内容只是临时查看，关闭后还要回到原上下文？这种内容就很适合用全屏覆盖层先试一版。

完整代码

@Entry
@Component
struct ArkUIContentCoverDemo {
  @State showCover: boolean = false

  @Builder
  sectionTitle(title: string, desc: string) {
    Column({ space: 6 }) {
      Text(title)
        .fontSize(19)
        .fontWeight(FontWeight.Bold)
        .fontColor('#111827')
      Text(desc)
        .fontSize(13)
        .fontColor('#6B7280')
        .lineHeight(20)
    }
    .width('100%')
    .alignItems(HorizontalAlign.Start)
  }

  @Builder
  coverContent() {
    Column() {
      Column({ space: 12 }) {
        Row() {
          Text('沉浸阅读')
            .fontSize(24)
            .fontWeight(FontWeight.Bold)
            .fontColor('#FFFFFF')
          Blank()
          Button('关闭')
            .fontSize(13)
            .fontColor('#111827')
            .backgroundColor('#FFFFFF')
            .borderRadius(18)
            .height(36)
            .padding({ left: 16, right: 16 })
            .onClick(() => {
              this.showCover = false
            })
        }
        .width('100%')

        Text('全屏覆盖适合让用户暂时进入一个完整视图，比如预览、阅读或确认一块较大的内容。')
          .fontSize(15)
          .fontColor('#DBEAFE')
          .lineHeight(24)
      }
      .width('100%')
      .padding({ left: 24, right: 24, top: 36, bottom: 24 })
      .backgroundColor('#1D4ED8')

      Column({ space: 14 }) {
        this.previewBlock('一整块内容', '全屏内容不用挤在原页面里，可以有自己的标题、正文和操作区。')
        this.previewBlock('明确关闭方式', '案例里放了一个关闭按钮，让用户知道怎么回到原页面。')
        this.previewBlock('默认转场', '这里使用 ModalTransition.DEFAULT，不额外加入复杂动画。')
      }
      .width('100%')
      .layoutWeight(1)
      .padding(24)
      .alignItems(HorizontalAlign.Start)
      .backgroundColor('#F8FAFC')
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F8FAFC')
  }

  @Builder
  previewBlock(title: string, desc: string) {
    Column({ space: 8 }) {
      Text(title)
        .fontSize(18)
        .fontWeight(FontWeight.Bold)
        .fontColor('#111827')
      Text(desc)
        .fontSize(14)
        .fontColor('#4B5563')
        .lineHeight(22)
    }
    .width('100%')
    .padding(16)
    .borderRadius(14)
    .backgroundColor('#FFFFFF')
    .border({ width: 1, color: '#E5E7EB' })
    .alignItems(HorizontalAlign.Start)
  }

  build() {
    Scroll() {
      Column({ space: 22 }) {
        Column({ space: 8 }) {
          Text('ArkUI bindContentCover')
            .fontSize(28)
            .fontWeight(FontWeight.Bold)
            .fontColor('#111827')
          Text('全屏盖上来，别把它当普通跳转')
            .fontSize(16)
            .fontColor('#4B5563')
          Text('全屏覆盖仍然是模态层。它适合临时进入完整视图，不负责页面栈和业务导航。')
            .fontSize(14)
            .fontColor('#6B7280')
            .lineHeight(22)
        }
        .width('100%')
        .alignItems(HorizontalAlign.Start)

        this.sectionTitle('全屏覆盖：保留当前上下文', '触发后内容铺满屏幕，关闭后回到原来的展示页。')
        Column({ space: 14 }) {
          Text('这个案例只展示一个全屏阅读层：顶部标题、正文说明和关闭按钮。')
            .fontSize(14)
            .fontColor('#4B5563')
            .lineHeight(22)
            .width('100%')

          Button('打开全屏覆盖层')
            .fontSize(14)
            .fontColor('#FFFFFF')
            .backgroundColor('#2563EB')
            .borderRadius(20)
            .height(40)
            .padding({ left: 20, right: 20 })
            .onClick(() => {
              this.showCover = true
            })
            .bindContentCover(this.showCover, this.coverContent, {
              modalTransition: ModalTransition.DEFAULT
            })
        }
        .width('100%')
        .padding(16)
        .borderRadius(14)
        .backgroundColor('#FFFFFF')
        .border({ width: 1, color: '#E5E7EB' })
        .alignItems(HorizontalAlign.Start)

        this.sectionTitle('用法边界：它不是普通页面', '如果你要做多级页面流转，应该把主题留给后面的导航章节。这里先只看覆盖层本身。')
        this.previewBlock('关闭由内容自己处理', '全屏内容里放一个清晰按钮，把 showCover 改回 false。')
      }
      .width('100%')
      .padding(24)
      .alignItems(HorizontalAlign.Start)
    }
    .width('100%')
    .height('100%')
    .backgroundColor('#F8FAFC')
  }
}