HarmonyOS 鸿蒙Next中整体页面有个刷新然后加上这个刷新之后沉浸式状态栏失效了

HarmonyOS 鸿蒙Next中整体页面有个刷新然后加上这个刷新之后沉浸式状态栏失效了 这个页面加上了刷新之后顶部,就这样了没办法用.expandSafeArea了

cke_267.png

像这种的,我整体页面有个刷新 ,然后加上这个刷新之后没办法把背景延伸了,这种的有什么好的办法吗?


更多关于HarmonyOS 鸿蒙Next中整体页面有个刷新然后加上这个刷新之后沉浸式状态栏失效了的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

实现demo如下:请参考

// Index.ets
import { ComponentContent } from '@kit.ArkUI';

class Params {
  refreshStatus: RefreshStatus = RefreshStatus.Inactive;

  constructor(refreshStatus: RefreshStatus) {
    this.refreshStatus = refreshStatus;
  }
}

@Builder
function customRefreshingContent(params: Params) {
  Stack() {
    Row() {
      LoadingProgress().height(32)
      Text("refreshStatus: " + params.refreshStatus).fontSize(16).margin({ left: 20 })
    }
    .alignItems(VerticalAlign.Center)
  }
  .align(Alignment.Center)
  .clip(true)
  .constraintSize({ minHeight: 32 })
  .width("100%")
}

@Entry
@Component
struct RefreshExample {
  @State isRefreshing: boolean = false;
  @State arr: String[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
  @State refreshStatus: RefreshStatus = RefreshStatus.Inactive;
  private contentNode?: ComponentContent<Object> = undefined;
  private params: Params = new Params(RefreshStatus.Inactive);

  aboutToAppear(): void {
    let uiContext = this.getUIContext();
    this.contentNode = new ComponentContent(uiContext, wrapBuilder(customRefreshingContent), this.params);
  }

  build() {
    Column() {
      Refresh({ refreshing: $$this.isRefreshing, refreshingContent: this.contentNode }) {
        List() {
          ForEach(this.arr, (item: string) => {
            ListItem() {
              Text('' + item)
                .width('70%')
                .height(80)
                .fontSize(16)
                .margin(10)
                .textAlign(TextAlign.Center)
                .borderRadius(10)
                .backgroundColor(0xFFFFFF)
            }
          }, (item: string) => item)
        }
        .onScrollIndex((first: number) => {
          console.info(first.toString());
        })
        .width('100%')
        .height('100%')
        .alignListItem(ListItemAlign.Center)
        .scrollBar(BarState.Off)
      }
      .backgroundColor(0x89CFF0)
      .pullToRefresh(true)
      .refreshOffset(96)
      .onStateChange((refreshStatus: RefreshStatus) => {
        this.refreshStatus = refreshStatus;
        this.params.refreshStatus = refreshStatus;
        // 更新自定义组件内容。
        this.contentNode?.update(this.params);
        console.info('Refresh onStatueChange state is ' + refreshStatus);
      })
      .onRefreshing(() => {
        setTimeout(() => {
          this.isRefreshing = false;
        }, 2000)
        console.info('onRefreshing test');
      })
    }
  }
}
// EntryAbility.ets
import { AbilityConstant, ConfigurationConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

const DOMAIN = 0x0000;

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    try {
      this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
    } catch (err) {
      hilog.error(DOMAIN, 'testTag', 'Failed to set colorMode. Cause: %{public}s', JSON.stringify(err));
    }
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy(): void {
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  onWindowStageCreate(windowStage: window.WindowStage): void {
    windowStage.getMainWindow().then(windowClass => {
      console.info('Succeeded in obtaining the main window. Data: ' + JSON.stringify(windowClass));
      windowClass.setWindowLayoutFullScreen(true).then(() => {
        console.info('Succeeded in setting the window layout to full-screen mode.');
      }).catch((e: BusinessError) => {
        console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(e));
      })
    }).catch((err: BusinessError) => {
      console.error('Failed to obtain the main window. Cause: ' + JSON.stringify(err));
    })
    windowStage.loadContent("pages/Index", (err) => {
      if (err.code) {
        console.error('Failed to load the content. Cause:' + JSON.stringify(err));
        return;
      }
      console.info('Succeeded in loading the content.');
    });
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
        return;
      }
      hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
    });
  }

  onWindowStageDestroy(): void {
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground(): void {
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onBackground');
  }
}

更多关于HarmonyOS 鸿蒙Next中整体页面有个刷新然后加上这个刷新之后沉浸式状态栏失效了的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


给沉浸式封成工具 abouttoappear进行调用就可以了

有具体的demo参考一下吗老师?

async aboutToAppear() {
  (await window.getLastWindow(getContext(this))).setWindowLayoutFullScreen(true);
}

直接设置不就行了,

好的,谢谢老师,

鸿蒙Next中页面刷新导致沉浸式状态栏失效,是因为刷新操作触发了窗口重建,状态栏样式未正确恢复。需在页面刷新后重新设置沉浸式状态栏。使用window模块的setWindowSystemBarProperties方法,在onPageShow生命周期或刷新回调中配置状态栏属性。示例代码:window.setWindowSystemBarProperties({ statusBarContentColor: '#000000' })。确保状态栏颜色与页面协调。

在HarmonyOS Next中,当页面使用了刷新组件(如Refresh)后,expandSafeArea方法可能失效,导致沉浸式状态栏背景无法正确延伸。这是因为刷新组件通常会创建一个新的顶层容器,改变了原有的窗口布局结构。

核心原因Refresh组件或其容器可能覆盖或重置了页面的安全区设置。

解决方案

  1. 检查并设置刷新组件的背景色:确保Refresh组件本身的背景色设置为透明或与页面背景一致。

    Refresh({
      // ... 刷新配置
    })
    .backgroundColor(Color.Transparent) // 关键:设置刷新容器背景为透明
    
  2. 在页面顶层显式设置安全区:在页面的根容器或Refresh组件外部使用expandSafeArea

    // 示例:在Refresh外部包裹容器并设置安全区
    Column() {
      // 页面内容
    }
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
    .backgroundColor('#yourColor')
    
  3. 调整组件结构:尝试将Refresh组件置于设置了安全区的容器内部,而不是相反。

    // 可能的结构调整
    Column()
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP])
      .backgroundColor('#yourColor')
    {
      Refresh() {
        // 实际页面内容
      }
      .backgroundColor(Color.Transparent)
    }
    
  4. 使用状态栏组件手动控制:如果上述方法无效,可以考虑使用Window模块的API或状态栏组件进行更精确的控制。

    import window from '@ohos.window';
    
    // 在页面aboutToAppear中设置状态栏
    aboutToAppear() {
      let context = getContext(this) as common.UIAbilityContext;
      window.getLastWindow(context).then(win => {
        win.setWindowSystemBarEnable(['status']).then(() => {
          win.setWindowSystemBarProperties({
            statusBarColor: '#yourColor' // 设置状态栏颜色
          });
        });
      });
    }
    

调试建议:使用预览器的布局边界查看工具,检查Refresh组件及其父容器的实际占位情况,确认安全区设置是否被正确应用。

通常,通过将刷新组件背景设为透明并在正确的层级设置expandSafeArea即可解决。如果问题依旧,请检查是否有其他全局样式或组件影响了布局。

回到顶部