DEV Community

้™ˆๆจ
้™ˆๆจ

Posted on

Treasure Case Sharing of HarmonyOS 5 Development โ€” Foldable Screen Hover State Development Practice

๐ŸŒŸ[HarmonyOS Foldable Screen Development Treasure Guide] So many great things hidden in the official docs! A step-by-step guide to mastering hover state development๐ŸŒŸ

Hey friends! I'm your old pal XX. Recently, while working on a HarmonyOS foldable screen project, I stumbled upon some hidden gems in the official documentation! Turns out HarmonyOS has already prepared tons of practical samples. Today, I have to show you the right way to unlock "hover state" development. Don't miss out~

๐Ÿ“ฑ Let's start with the basics: What is the hover state?

It means folding the screen halfway like a laptop and placing it on the table. At this point, the screen automatically splits into upper and lower halves. HarmonyOS provides three ways to implement this. Let's go through them one by one!

1. For the lazy: FolderStack Component

(Suitable for simple scenarios like video/music players)

// The code is as simple as a sandwich cookie!
FolderStack({ upperItems: ['video'] }) {
  VideoComponent().id('video')  // Upper half: playback area
  ControlPanel()               // Lower half: control bar
}
Enter fullscreen mode Exit fullscreen mode

โœจ Practical Tips:

  1. You must set the<font style="color:rgba(0, 0, 0, 0.9);background-color:rgb(252, 252, 252);">upperItems</font>array to tell the system which components go to the upper half
  2. The hover layout is only triggered in fullscreen mode (important!)
  3. Great for live streaming apps where the comment section automatically sinks to the lower half

2. Split-screen magic: FoldSplitContainer

(Must-see for dual-screen operation scenarios in games/office apps)

FoldSplitContainer({
  primary: () => <GameScreen/>,  // Upper half: game screen
  secondary: () => <Joystick/>  // Lower half: virtual joystick
})
Enter fullscreen mode Exit fullscreen mode

๐ŸŽฎ Case Extensions:

  • Food delivery app: upper half map + lower half merchant list
  • Stock app: upper half K-line chart + lower half trading panel โš ๏ธ Note: The system enforces two/three-column layouts. For fancy layouts, check the next solution!

3. Advanced mode: Custom hover state

(Special angle hover shooting scenarios for camera apps)

// Focus on listening to these two key events!
display.on('foldStatusChange', (status) => {
  if(status === 'half-folded' && landscape){
    const foldRegion = display.getCurrentFoldCreaseRegion()
    // Work your layout magic here...
  }
})
Enter fullscreen mode Exit fullscreen mode

๐Ÿ”ฅ Advanced Tips:

  1. Limit hover trigger to specific angles (e.g., 60ยฐ-120ยฐ)
  2. Dynamically adjust the camera viewfinder to avoid the crease
  3. Implement TikTok-style hover playback + floating comment window

๐Ÿš€ Pitfall Guide (Lessons Learned)

  1. Use<font style="color:rgba(0, 0, 0, 0.9);background-color:rgb(252, 252, 252);">px2vp</font>to convert units when getting crease region coordinates
  2. Remember to off event listeners when the page is destroyed!
  3. The crease region on Huawei Mate X3 is 5px larger than on Pocket S (measured data)
  4. Disable bottom navigation bar clicks in hover state (official recommended solution)

๐Ÿ’ก Ultimate Solution for Indecisiveness

FolderStack FoldSplit Custom
Development Difficulty โญ โญโญ โญโญโญโญโญ
Layout Flexibility 80% 60% 100%
Special Scenario Adaptation โŒ โŒ โœ…
Recommended Scenarios Media Tools Innovative

One last truth: The official sample code also hides black technologies like hover gesture recognition and multi-window linkage. If this post gets 100 likes, I'll immediately work on the next article! What mysterious issues have you encountered in development? Come battle it out in the comments section๐Ÿ‘‡

Top comments (0)