HarmonyOS鸿蒙Next新手求助，标题显示隐藏

HarmonyOS鸿蒙Next新手求助，标题显示隐藏 如下图：一开始图片会占满顶部安全区，当页面滚动时守护中心才会显示，这种应该如何做

cke_340.png


更多关于HarmonyOS鸿蒙Next新手求助，标题显示隐藏的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

这不黑马的守护助手吗

更多关于HarmonyOS鸿蒙Next新手求助，标题显示隐藏的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


你好，这种通常是加一层 Stack, 将标题组件放到当前内容的下方， 然后在滚动的回调方法中动态改变标题的透明度即可。获取滚动的偏移，计算透明度。

@Entry
@Component
struct Index {
  private scroller: Scroller = new Scroller()
  @State navOpacity: number = 0

  build() {
    Stack() {
      this.contentBuilder()
      this.navbar()
    }
    .alignContent(Alignment.TopStart)
    .height('100%')
  }

  // 当前组件内容
  @Builder
  contentBuilder() {
    Scroll(this.scroller) {
      // 这里是你当前组件内容
      Text('1111')
        .height(2000)

    }
    .width('100%')
    .height('100%')
    .backgroundColor('#f00')
    .onDidScroll((event) => {
      const y = this.scroller.currentOffset().yOffset;
      if (y <= 88) {
        this.navOpacity = y / 88;
      } else {
        this.navOpacity = 1;
      }
    })
  }

  @Builder
  navbar() {
    Row() {
      Text('标题')
    }
    .alignItems(VerticalAlign.Center)
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .height(88)
    .backgroundColor('#fff')
    .opacity(this.navOpacity)
  }
}

HarmonyOS的流畅动画和过渡效果让操作更加顺畅，体验极佳。

好像系统导航有支持这个，可以自动实现，

根据外层布局来判断上下滚动,根据滚动距离来显隐性的展示标题

获取状态栏高度，margin{top：}一下

windowStage.getMainWindow().then((data: window.Window) => {
        try {
          this.windowObj = data;
          let uiContext = data.getUIContext();

          this.updateBreakpoint(this.windowObj.getWindowProperties().windowRect.width, uiContext);
          this.windowObj.on('windowSizeChange', (windowSize: window.Size) => {
            this.updateBreakpoint(windowSize.width, uiContext);
          });
          data.setWindowLayoutFullScreen(true).then(() => {
            hilog.info(0x0000, 'EntryAbility', 'Succeeded in setting the window layout to full-screen mode.');
          }).catch((err: BusinessError) => {
            hilog.info(0x0000, 'EntryAbility',
              `Failed to set the window layout to full-screen mode. Cause: code=${err.code}, message=${err.message}`);
          });


          type = window.AvoidAreaType.TYPE_SYSTEM;
          avoidArea = data.getWindowAvoidArea(type);
          let topRectHeight = avoidArea.topRect.height;
          AppStorage.setOrCreate('topRectHeight', topRectHeight);
          
        } catch (err) {
          let error = err as BusinessError;
          hilog.error(0x0000, 'GesturesShare', `getWindowProperties error ${error.code} ${error.message}`);
        }
      }).catch((error: BusinessError) => {
        hilog.error(0x0000, 'testTag', 'Failed to getMainWindow. Cause: ',
          JSON.stringify(error.code) + JSON.stringify(error.message));
      })

@StorageLink('topRectHeight') topRectHeight: number = 0;

.margin({ top: this.getUIContext().px2vp(this.topRectHeight) })

看看会不会显示

不然的话代码放出来瞅瞅，

在HarmonyOS Next中，标题显示隐藏可通过页面配置或代码控制。在module.json5中设置titleBarVisible为false可隐藏标题栏。若需动态控制，可在页面代码中使用windowClass的setTitleBarVisibility方法。

这种效果通常称为“沉浸式状态栏”或“可折叠标题栏”，在HarmonyOS Next中可以通过Scroll组件和状态栏控制来实现。核心思路是监听页面滚动，动态调整顶部组件的状态。

以下是关键实现步骤：

  1. 使用Scroll组件：将页面主体内容包裹在Scroll中，并设置onScroll事件监听滚动位置。
  2. 控制状态栏透明：在页面初始化时，通过window.getLastSubWindow()获取窗口实例，调用setWindowSystemBarProperties方法将状态栏设置为透明。
  3. 动态显示/隐藏顶部区域：在Scroll的onScroll回调中，根据滚动偏移量（scrollOffset）判断。当滚动超过预定阈值（如图片高度减去状态栏高度），显示“守护中心”等顶部内容；反之则隐藏，让图片延伸至状态栏下方。

示例代码结构：

import { Scroll, Column, Text, Image } from '@kit.ArkUI';

@Entry
@Component
struct ImmersiveSample {
  private scrollOffset: number = 0;
  // 阈值，例如图片高度减去状态栏高度
  private threshold: number = 200;

  aboutToAppear() {
    // 设置状态栏透明
    let windowClass = window.getLastSubWindow();
    windowClass.setWindowSystemBarProperties({
      statusBarColor: '#00000000' // 透明
    });
  }

  build() {
    Column() {
      // 顶部区域：根据滚动位置动态显示/隐藏
      if (this.scrollOffset > this.threshold) {
        Column() {
          Text('守护中心')
            .fontSize(20)
            .fontColor(Color.White)
        }
        .width('100%')
        .height(60)
        .backgroundColor('#000000')
      }

      // 可滚动内容区
      Scroll() {
        Column() {
          Image($r('app.media.banner'))
            .width('100%')
            .aspectRatio(2) // 控制图片比例
          // 其他页面内容...
        }
      }
      .onScroll((scrollOffset: number) => {
        this.scrollOffset = scrollOffset;
      })
    }
    .width('100%')
    .height('100%')
  }
}

注意事项：

  • 阈值（threshold）需根据实际图片高度和安全区高度动态计算，通常为“图片高度 - 状态栏高度”。
  • 若顶部内容复杂，可使用Stack层叠布局，通过透明度或位移实现更平滑的过渡动画。
  • 确保图片资源尺寸适配不同设备，避免拉伸或空白。

这种方法能有效实现滚动时标题栏的显隐切换，符合HarmonyOS Next的交互规范。

回到顶部