DEV Community

陈杨
陈杨

Posted on

Treasure Case Sharing of HarmonyOS 5 Development — One-to-Many Development Example (News Reading)

✨HarmonyOS Development Treasure Case Revealed! The Secret Weapon for One-Code Multi-Device Adaptation✨

Hello everyone! Today I'm sharing a real treasure I found in HarmonyOS development—the official set of "One-to-Many Development" practical cases! These hands-on guides, hidden deep in the documentation, are like secret martial arts manuals for multi-device adaptation! I stayed up late to study the docs and have distilled the most valuable insights for you!

1. Why is this a treasure?

The core of HarmonyOS "One-to-Many Development" is one codebase for all devices! The official news reading case in the docs breaks down adaptation techniques for phone/tablet/PC in detail. Just seeing how they use 5 magical layouts to solve different screen problems made me slap my thigh—so it can be done like this!

2. Three Must-Learn Core Techniques

1️⃣ Grand Layout Shift

  • Read & Comment scenario: On phones, it's a vertical layout (news + comments); on large screens, it switches to a horizontal split!
  • Code Magic: Listen for screen breakpoints and use the span property of GridCol for automatic position switching 
GridCol({ 
  span: { 
    sm: 12,  // Full row on phone
    md: 6    // Two columns on tablet
  }
})
Enter fullscreen mode Exit fullscreen mode

2️⃣ Shadow Clone—Repeated Layouts

  • News list is single-column on phones, instantly becomes double-column waterfall on tablets
  • Practical Tip: Use the same data source, control render count via breakpoints 
onBreakpointChange((bp)=>{
  if(bp=='sm') this.showCount=1  // Phone
  if(bp=='md') this.showCount=2  // Tablet
})
Enter fullscreen mode Exit fullscreen mode

3️⃣ Seventy-Two Transformations Waterfall

  • Featured Discovery page: single column on phone → double column on tablet → triple column on PC
  • Key Code: WaterFlow component + dynamic column control 
WaterFlow({
  columnsTemplate: 
    bp=='sm' ? '1fr' : 
    bp=='md' ? '1fr 1fr' : '1fr 1fr 1fr'
})
Enter fullscreen mode Exit fullscreen mode

3. Super Practical Development Tips

📱→💻 Layout Auto-Extension

  • Horizontal Scroll Bar: Use Scroll + Row components, the wider the screen, the more cards are shown 
Row(){
  newsList.map(item=> <NewsCard/>)
}
.scrollable(ScrollDirection.Horizontal)
Enter fullscreen mode Exit fullscreen mode

🔍 Smart Show/Hide Control

  • Show abstract on large screens: Dynamically control text visibility via the visibility property 
Text(abstract)
.visibility(
  bp=='lg' ? Visibility.Visible 
           : Visibility.Hidden
)
Enter fullscreen mode Exit fullscreen mode

🎨 Immersive Experience

  • Full-screen reading mode: Use grid layout to auto-hide the status bar
  • Font auto-scaling: Use proportional unit fp for dynamic font size scaling

4. Pitfall Avoidance Guide

  1. Be careful with breakpoint listeners: Don't do time-consuming operations in onBreakpointChange
  2. Multi-device preview tip: Open phone + tablet emulators at the same time to compare effects
  3. Image adaptation secret: Use aspectRatio to lock width and height ratio

5. Resource Guide

Want to experience these cool tricks yourself? Here are the portals:

  • Official case library: Developer Docs → Domain Cases → News Reading
  • Code express: Search "NewsDemo" in DevEco Studio
  • Community group: HarmonyOS Developer Forum #OneToManyDevelopment

Finally, from the bottom of my heart: I've read these cases three times, and I discover something new each time! Especially the "Read & Comment" layout switch, which made me refactor my project and cut code by 40%! You must try coding it yourself—it'll open a whole new world!

If you run into problems, don't hesitate to reach out in the developer community—maybe your next hit app is just around the corner! 🚀

(Tips: Long-press the diagrams in the doc to jump directly to the corresponding code file—this hidden feature is awesome!)

Top comments (0)