DEV Community

陈杨
陈杨

Posted on

Hong Mong 5 Development Treasure Case Sharing Multi-Window Adaptive Development Practice

🎉Hello everyone! Today I want to share with HarmonyOS developers a super practical treasure—the official HarmonyOS multi-window adaptation cases hidden in the documentation! Have you ever found that there are solutions in the docs, but just can't find the specific code references? I recently dug up these hidden cases and quickly organized them to share with you all!

🌈 1. Window Breakpoint Adaptation: No Need to Write Two Sets of Code for Foldable Screens!

Scenario Pain Point:

The same window width may correspond to different layouts on different devices (such as foldable screen unfolded state and phone landscape mode). Simply judging by width can lead to issues!

Core Code from Official Case:

// Listen for window changes in the UIAbility lifecycle
onWindowStageCreate(windowStage: window.WindowStage) {
  windowStage.getMainWindow().then((windowObj) => {
    // Initialize breakpoints
    this.calculateBreakpoints(windowObj);
    // Dynamically listen for window size changes
    windowObj.on('windowSizeChange', (newSize) => {
      this.updateBreakpoints(newSize);
      // Trigger global state to update page layout
      AppStorage.setOrCreate('currentLayout', this.getLayoutMode());
    });
  });
}
Enter fullscreen mode Exit fullscreen mode

Pitfall Avoidance Guide:

  • Huawei Mate X3 unfolded has an aspect ratio close to 1:1, so distinguish it from regular phone landscape mode
  • For global state management, it is recommended to use @StorageLink/@StorageProp for automatic synchronization

📱 2. Portrait and Landscape Rotation Strategy: Small Foldable Outer Screens Can Also Adapt!

Real Pitfall Experience:

The Huawei Pocket S outer screen is a square, but according to traditional logic, it is recognized as a portrait phone, causing videos to not play in landscape!

Official Recommended Solution:

// Dynamically judge based on aspect ratio
const aspectRatio = windowHeightVp / windowWidthVp;
if (aspectRatio >= 0.8 && aspectRatio <= 1.2) {
  // For square-like devices, force enable rotation
  windowObj.setPreferredOrientation(window.Orientation.AUTO_ROTATION);
} else if (deviceType === 'foldable') {
  // Special handling for foldable screen unfolded state
  handleFoldableScreen();
}
Enter fullscreen mode Exit fullscreen mode

Device Compatibility List:

Device Type Rotation Strategy
Bar Phone Default Portrait
Pocket Outer Screen Force Enable (Aspect Ratio ≈ 1:1)
MatePad Tablet All-direction Rotation

🖥️ 3. PC Free Window Adaptation: Windows-style Window Operation is Awesome!

Unexpected Features:

  • Minimum window size limit
  • Custom title bar (hide logo but keep close button)
  • Seamless switching between fullscreen and windowed mode

Key Configuration Code:

// module.json5 must be configured!
"abilities": [{
  "minWindowWidth": 320,
  "minWindowHeight": 480,
  "maxWindowWidth": 2560,
  "maxWindowHeight": 1600
}]
Enter fullscreen mode Exit fullscreen mode

Window Mode Switching Tips:

// Double-click to enter/exit fullscreen
@State isFullscreen: boolean = false;

Button().onClick(() => {
  if (this.isFullscreen) {
    windowUtil.recover(); // Exit fullscreen
  } else {
    windowUtil.maximize({ enterImmersive: true }); // Immersive fullscreen
  }
})
Enter fullscreen mode Exit fullscreen mode

🌌 4. Ultimate Immersive Adaptation: Cool Transparent Status Bar!

Common Newbie Mistake:

Directly setting fullscreen → content is covered by the status bar!

The Correct Way:

// Step1: Set fullscreen mode
windowObj.setWindowLayoutFullScreen(true);

// Step2: Get avoid area
const avoidTop = px2vp(window.getWindowAvoidArea(window.AvoidAreaType.SYSTEM).topRect.height);

// Step3: Dynamically adjust layout
Column() {
  // Content area
}
.padding({ top: avoidTop }) // Leave space at the top for the status bar
Enter fullscreen mode Exit fullscreen mode

💡 Final Words

Multi-window adaptation may seem complicated at first glance, but HarmonyOS actually provides a lot of ready-made tools! Suggestions for everyone:

  1. Use<font style="color:rgba(0, 0, 0, 0.9);background-color:rgb(252, 252, 252);">ohpm</font>to install official sample templates <font style="color:rgba(0, 0, 0, 0.9);background-color:rgb(252, 252, 252);">ohpm install @ohos/multi-window-demo</font>
  2. Make good use of DevEco's previewer for multi-device simulation (You can directly preview the foldable screen unfolding animation!)
  3. Check the [Developer Q&A Community] when you encounter problems 90% of the pitfalls have already been encountered by others~

If you find this summary helpful, remember to give a❤️to let me know! What tricky adaptation problems have you encountered? Let's chat in the comments~ ✨

Top comments (0)