Web Display Issues, Tab Bottom Obstruction, Navigation Bar Theme Color Adaptation

【Daily HarmonyOS Next Knowledge】Web Display Issues, Tab Bottom Obstruction, Navigation Bar Theme Color Adaptation, Manual App Background Transition, Popup Animation 1. In HarmonyOS projects, do all web pages display from the top of the web container, expanding from small to large? In the project, all web pages display from the top of the web container, expanding from small to large. Use a custom UA to avoid this. The demo is as follows: import webview from '@ohos.web.webview'; @Entry @Component struct Page2 { webController: webview.WebviewController = new webview.WebviewController(); aboutToAppear(): void { webview.WebviewController.setWebDebuggingAccess(true); } build() { Row() { Column() { Web({ src: "www.huawei.com", controller: this.webController }) .domStorageAccess(true) .onControllerAttached(() => { let newAgent = "Mozilla/5.0 (Phone; xxxx; OpenHarmony 4.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile"; this.webController.setCustomUserAgent(newAgent); }); } .width('100%'); } .height('100%'); } } 2. The bottom of tabContent in HarmonyOS is obstructed? The tabContent contains a scroll layout, and the last row cannot be fully displayed. Reason: The List's default height is 100%. If there is content above the List, it will squeeze the List's display area, making it impossible to scroll up. This can be solved by setting a fixed height for the List or using the LayoutWeight(1) attribute for adaptive height. 3. How to configure the navigation bar theme color in HarmonyOS? Based on the light/dark mode interfaces provided by ArkTS UI: https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-dark-mode-adaptation#section128661451172714 Method 1: Use system resources (recommended first): System-supported resources automatically adapt to dark mode. Developers can view system resources to obtain supported options. Method 2: Use custom themes: If developers need to customize color performance for light/dark modes, follow these steps: https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs/faqs-arkui-359 Define the status bar background color for light mode in base/element/color.json. Define the status bar background color for dark mode in dark/element/color.json. Listen for light/dark mode changes. After detecting a mode switch, use setWindowSystemBarProperties to manually set the status bar font color. Reference code: Define color resources for light and dark modes // resources/dark/element/color.json { "color": [ { "name": "status_bar", "value": "#000000" } ] } // resources/base/element/color.json { "color": [ { "name": "status_bar", "value": "#FFFFFF" } ] } Cache the window object and current color mode for subsequent use of the setWindowSystemBarProperties interface to set status bar properties. // EntryAbility.ets onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void { hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate'); // Cache the current device color mode AppStorage.setOrCreate('currentColorMode', this.context.config.colorMode); } onWindowStageCreate(windowStage: window.WindowStage): void { // Main window is created, set main page for this ability hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate'); windowStage.loadContent('pages/Index', (err) => { if (err.code) { hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? ''); return; } hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.'); let windowClass: window.Window = windowStage.getMainWindowSync(); // Get the main application window // 1. Set the window to full screen let isLayoutFullScreen = true; windowClass.setWindowLayoutFullScreen(isLayoutFullScreen); // 2. Cache the window object AppStorage.setOrCreate('windowClass', windowClass); }); } When the color mode changes, update the cached color mode. // EntryAbility.ets // Listen for system configuration changes onConfigurationUpdate(newConfig: Configuration): void { let newColorMode = newConfig.colorMode; let currentColorMode = AppStorage.get('currentColorMode'); if (newColorMode === currentColorMode) { return; } // Update the cached color mode AppStorage.setOrCreate('currentColorMode', newConfig.colorMode); } The page listens for color mode changes and updates the status bar font color when the mode changes. import { window } from '@kit.ArkUI'; import { ConfigurationConstant } from '@kit.AbilityKit'; @Entry @Component struct SysDarkMode { @State message: string = '页面布局'; @StorageProp('currentColorMode') @Watch('onColorModeChange') currentColorMode: number = ConfigurationConstant.Co

Jun 25, 2025 - 17:50

【Daily HarmonyOS Next Knowledge】Web Display Issues, Tab Bottom Obstruction, Navigation Bar Theme Color Adaptation, Manual App Background Transition, Popup Animation

1. In HarmonyOS projects, do all web pages display from the top of the web container, expanding from small to large?

In the project, all web pages display from the top of the web container, expanding from small to large.

Use a custom UA to avoid this. The demo is as follows:

import webview from '@ohos.web.webview';

@Entry
@Component
struct Page2 {
  webController: webview.WebviewController = new webview.WebviewController();
  aboutToAppear(): void {
    webview.WebviewController.setWebDebuggingAccess(true);
  }
  build() {
    Row() {
      Column() {
        Web({ src: "www.huawei.com", controller: this.webController })
          .domStorageAccess(true)
          .onControllerAttached(() => {
            let newAgent = "Mozilla/5.0 (Phone; xxxx; OpenHarmony 4.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile";
            this.webController.setCustomUserAgent(newAgent);
          });
      }
      .width('100%');
    }
    .height('100%');
  }
}

2. The bottom of tabContent in HarmonyOS is obstructed?

The tabContent contains a scroll layout, and the last row cannot be fully displayed.

Reason: The List's default height is 100%. If there is content above the List, it will squeeze the List's display area, making it impossible to scroll up. This can be solved by setting a fixed height for the List or using the LayoutWeight(1) attribute for adaptive height.

3. How to configure the navigation bar theme color in HarmonyOS?

Based on the light/dark mode interfaces provided by ArkTS UI: https://developer.huawei.com/consumer/cn/doc/best-practices/bpta-dark-mode-adaptation#section128661451172714

Method 1: Use system resources (recommended first): System-supported resources automatically adapt to dark mode. Developers can view system resources to obtain supported options.

Method 2: Use custom themes: If developers need to customize color performance for light/dark modes, follow these steps:

https://developer.huawei.com/consumer/cn/doc/harmonyos-faqs/faqs-arkui-359

Define the status bar background color for light mode in base/element/color.json.
Define the status bar background color for dark mode in dark/element/color.json.
Listen for light/dark mode changes.
After detecting a mode switch, use setWindowSystemBarProperties to manually set the status bar font color.

Reference code:

Define color resources for light and dark modes

// resources/dark/element/color.json
{
  "color": [
    {
      "name": "status_bar",
      "value": "#000000"
    }
  ]
}

// resources/base/element/color.json
{
  "color": [
    {
      "name": "status_bar",
      "value": "#FFFFFF"
    }
  ]
}

Cache the window object and current color mode for subsequent use of the setWindowSystemBarProperties interface to set status bar properties.

// EntryAbility.ets
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  // Cache the current device color mode
  AppStorage.setOrCreate('currentColorMode', this.context.config.colorMode);
}

onWindowStageCreate(windowStage: window.WindowStage): void {
  // Main window is created, set main page for this ability
  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

  windowStage.loadContent('pages/Index', (err) => {
    if (err.code) {
      hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
      return;
    }
    hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
    let windowClass: window.Window = windowStage.getMainWindowSync(); // Get the main application window
    // 1. Set the window to full screen
    let isLayoutFullScreen = true;
    windowClass.setWindowLayoutFullScreen(isLayoutFullScreen);
    // 2. Cache the window object
    AppStorage.setOrCreate('windowClass', windowClass);
  });
}

When the color mode changes, update the cached color mode.

// EntryAbility.ets
// Listen for system configuration changes
onConfigurationUpdate(newConfig: Configuration): void {
  let newColorMode = newConfig.colorMode;
  let currentColorMode = AppStorage.get<ConfigurationConstant.ColorMode>('currentColorMode');
  if (newColorMode === currentColorMode) {
    return;
  }
  // Update the cached color mode
  AppStorage.setOrCreate('currentColorMode', newConfig.colorMode);
}

The page listens for color mode changes and updates the status bar font color when the mode changes.

import { window } from '@kit.ArkUI';
import { ConfigurationConstant } from '@kit.AbilityKit';

@Entry
@Component
struct SysDarkMode {
  @State message: string = '页面布局';
  @StorageProp('currentColorMode') @Watch('onColorModeChange') currentColorMode: number =
    ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT;

  aboutToAppear(): void {
    this.onColorModeChange();
  }

  onColorModeChange(): void {
    // Get the current application window
    let windowClass = AppStorage.get<window.Window>('windowClass') as window.Window;

    if (this.currentColorMode === ConfigurationConstant.ColorMode.COLOR_MODE_LIGHT) {
      // Current mode is light
      // Set font to black
      windowClass.setWindowSystemBarProperties({
        // Status bar text color
        statusBarContentColor: '#000000'
      });
    } else if (this.currentColorMode === ConfigurationConstant.ColorMode.COLOR_MODE_DARK) {
      // Current mode is dark
      // Set font to white
      windowClass.setWindowSystemBarProperties({
        // Status bar text color
        statusBarContentColor: '#FFFFFF'
      });
    }
  }

  build() {
    Column() {
      Row()
        .width('100%')
        .height(100)
        .backgroundColor($r('app.color.status_bar'));
      // Page layout
      Text(this.message)
        .fontSize(50)
        .fontColor(Color.Red)
        .fontWeight(FontWeight.Bold)
        .alignRules({
          center: {
            anchor: '__container__',
            align: VerticalAlign.Center
          },
          middle: {
            anchor: '__container__',
            align: HorizontalAlign.Center
          }
        })
        .layoutWeight(1);
    }
    .height('100%')
    .width('100%');
  }
}

4. How to manually send a HarmonyOS app to the background?

The window has a minimize method, which notifies AMS to send the window to the background, achieving the effect of sending the app to the background.

Reference link: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5

Currently, windowStage only exists in onWindowStageCreate and needs to be obtained using AppStorage.

Reference code:

onWindowStageCreate(windowStage: window.WindowStage): void {
  // Main window is created, set main page for this ability
  hilog.info(0x0000, ‘testTag’, ‘%{public}s’, ‘Ability onWindowStageCreate’);

  windowStage.loadContent(‘pages/Page6’, (err, data) => {
    if (err.code) {
      hilog.error(0x0000, ‘testTag’, ‘Failed to load the content. Cause: %{public}s’, JSON.stringify(err) ?? ‘’);
      return;
    }
    AppStorage.setOrCreate(“windowStage”, windowStage);
    hilog.info(0x0000, ‘testTag’, ‘Succeeded in loading the content. Data: %{public}s’, JSON.stringify(data) ?? ‘’);
  });
}

5. How to implement animations in a custom popup using promptAction.openCustomDialog in HarmonyOS?

How to implement animations in a custom popup via promptAction.openCustomDialog?

Property animations apply when properties change. Transition animations can be used: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-transition-animation-component-V5

Reference code:

Image(HWUIToast.icon)
  .width(32)
  .height(32)
  .margin({
    top: 20
  })
  .transition(TransitionEffect.rotate({ z: 1, angle: 180 }).animation({
    duration: 1000, iterations: -1
  }))