DEV Community

ι™ˆζ¨
ι™ˆζ¨

Posted on

Hong Mong 5 Development Treasure Case Sharing Pura X Development Case Sharing

🌟 HarmonyOS Treasure Case Sharing: Pura X Outer Screen Development Practice Analysis

Hello everyone! I am your HarmonyOS development buddy. Today, while browsing the official documentation, I accidentally discovered a "treasure-level" case hidden by Huaweiβ€”Pura X foldable phone outer screen development practice! These practical solutions are extremely useful, but surprisingly few people discuss them. I quickly organized them into valuable content to share with you. It's high-energy throughout, so remember to bookmark it~

🧩 1. Why do we need to specially adapt the outer screen?

Pura X adopts a vertical fold design, and the outer screen is a 1:1 square screen (the inner screen is 16:10). This means:

  • The outer screen height is only 1/2 of the inner screen (about 24vp vs 48vp)
  • Operation needs to be one-hand friendly (for frequent actions like viewing notifications/payments/navigation)
  • Special handling is required for layout squeezing/content truncation issues

The official solution provides 5 core scenarios. Let's break them down one by one πŸ‘‡

πŸš€ 2. Five Core Development Scenarios (with Code Analysis)

1️⃣ Responsive Layout for Small Windows

Pain Point: The same component needs different sizes on the inner/outer screen

Solution: Dynamically adjust styles through dual breakpoint detection

Image($r('app.media.icon'))
.height(
  // Key judgment: landscape breakpoint sm + portrait breakpoint md
  this.currentWidthBreakpoint === 'sm' && 
  this.currentHeightBreakpoint === 'md' 
    ? 24 // Outer screen height
    : 48 // Inner screen height
)
.aspectRatio(1) // Keep square
Enter fullscreen mode Exit fullscreen mode

2️⃣ Content Visibility Control

Pain Point: Non-core elements (such as Banner ads) need to be hidden on the outer screen

Solution A: Use visibility to control display

Column() {
  Text("Outer screen exclusive content").fontSize(12)
}
.visibility(
  this.currentWidthBreakpoint === 'sm' && 
  this.currentHeightBreakpoint === 'md' 
    ? Visibility.Visible 
    : Visibility.None
)
Enter fullscreen mode Exit fullscreen mode

Solution B: Conditional rendering (suitable for complex components)

if (this.isSmallScreen) { // Custom judgment function
  Column() {
    Button("Quick Pay on Outer Screen")
  }
}
Enter fullscreen mode Exit fullscreen mode

3️⃣ Scroll Container Optimization

Pain Point: Insufficient outer screen height leads to content truncation

Pro Tip: Use the Scroll component + automatic invalidation mechanism

Scroll() {
  Column() { /* Main content */ }
}
.scrollBar(BarState.Off) // Hide scroll bar
.height('100%')
Enter fullscreen mode Exit fullscreen mode

Highlight: When the content height < container height, Scroll automatically disables scrolling, no manual judgment needed!

4️⃣ Immersive Short Video Adaptation

Effect: Full-screen immersive video + semi-transparent floating controls

Stack() {
  // 1. Bottom video (full screen)
  Image($r('app.media.video_bg'))
    .objectFit(ImageFit.Cover) // Key: keep aspect ratio and fill

  // 2. Top title bar (avoid notch)
  Row() { ... }
    .padding({ top: $r('app.float.topAvoidHeight') }) 

  // 3. Side floating controls (with flexible spacing)
  Scroll() {
    Column() {
      Blank().layoutWeight(3) // Top flexible spacer
      Button("Like") 
      Blank().layoutWeight(1) // Bottom flexible spacer
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

5️⃣ Hide Controls on Scroll (Super Practical!)

Interaction Effect:

  • Swipe up β†’ Hide title bar/bottom bar
  • Swipe down β†’ Gradually restore

Core Code:

// Listen to scroll offset
.onScrollFrameBegin((offset: number) => {
  if (offset > 0) { // Swipe up
    this.topBarHeight *= 0.95 // Gradually shrink height
    this.barOpacity -= 0.05  // Gradually decrease opacity
  } else { // Swipe down
    animateTo({ duration: 300 }, () => {
      this.topBarHeight = 78 + avoidHeight // Restore height
      this.barOpacity = 1                  // Restore opacity
    })
  }
})
Enter fullscreen mode Exit fullscreen mode

πŸ’‘ 3. Pitfall Avoidance Guide

  1. System Avoid Area Handling Be sure to use getWindowAvoidArea() to get the notch/chin height: 
const topAvoid = window.getWindowAvoidArea(AvoidAreaType.TYPE_SYSTEM)
AppStorage.setOrCreate('topAvoidHeight', topAvoid.topRect.height)
Enter fullscreen mode Exit fullscreen mode
  1. Fold State Monitoring 
// Listen for fold state changes
foldStatus: FoldStatus = FoldStatus.FOLD_STATUS_EXPANDED

aboutToAppear() {
  foldController.on('foldStatusChange', (status) => {
    this.foldStatus = status
  })
}
Enter fullscreen mode Exit fullscreen mode
  1. Transition Animation Optimization When switching from inner to outer screen, use page continuation to ensure smoothness: 
// Define shared elements in pageTransition
PageTransition() {
  PageTransitionEnter({ duration: 250 })
    .sharedTransition('sharedButton')
}
Enter fullscreen mode Exit fullscreen mode

πŸ”š 4. Conclusion

The Pura X outer screen adaptation solution unearthed this time is simply the "golden manual" for foldable screen development! Especially the scroll-to-hide controls and dual breakpoint responsive design, which can be directly applied to the development of other HarmonyOS devices.

Finally, a word for everyone: The foldable screen ecosystem is booming. If you master these technologies now, you'll be the brightest star in next year's salary increase! πŸ’ͺ

(Original compilation is not easy. If you find it useful, give me a like to let me know~ Next time, I'll share practical experience on "HarmonyOS Distributed Camera Development"!)

Top comments (0)