DEV Community

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

Posted on

Treasure Case Sharing of HarmonyOS 5 Development β€” One-to-Many Development Example (Community Comments)

🌟[HarmonyOS Development Treasure Trove Case Release!] Practical Experience Sharing on One-Write Multi-Device Adaptation🌟

Hello everyone! While browsing the HarmonyOS developer documentation today, I stumbled upon a real "treasure"β€”the official docs actually hide tons of super practical development cases! Especially the "Community Comment App" one-write multi-device example. After reading it, I thought, "Wow, I didn't know you could do that!" 😍 I had to organize and share it with you, and break down some of the core cases step by step!

πŸ“± What is One-Write Multi-Device Development? In a nutshell:

Develop once, automatically adapt to phone, tablet, and PC! HarmonyOS's responsive layout and dynamic UI capabilities let different devices "shine in their own way"β€”no need to write multiple sets of code. Truly a blessing for developers!

πŸ› οΈ Super Practical Case Analysis (with code!)

1️⃣ Hotspot Page Layout: Instantly Switch from Single Column to Waterfall Flow

Function: Vertically display news in a list on phones, and automatically switch to a multi-column waterfall flow on tablets/PCs. The larger the screen, the more content is shown!
Core Techniques:

  • List container + breakpoint control: Dynamically set the number of columns (lanes property) based on screen width (currentBreakpoint).
  • Code highlights: 
// Phone: single column β†’ Tablet: two columns β†’ PC: three columns
List() {  
  ForEach(data, (item) => {  
    ListItem() { ... }  
    .width(new BreakpointType('100%', '50%', '33%').getValue(currentBreakpoint))  
  })  
}  
.lanes(3) // Supports up to 3 columns  
.listDirection(Axis.Horizontal) // Horizontal arrangement
Enter fullscreen mode Exit fullscreen mode

Effect: Clean on small screens, dense and space-efficient on large screens! (Image: phone β†’ tablet β†’ PC transition)

2️⃣ Dynamic Cards: Make the UI "Come Alive"

Function: Single-column cards on phones, automatically switch to two-column waterfall flow on PC, with adaptive card spacing.
Cool Tech:

  • WaterFlow container: Dynamically set the number of columns (columnsTemplate) based on device type.
  • Code snippet: 
WaterFlow() {  
  ForEach(cardData, (item) => {  
    FlowItem() {  
      CardView(item) // Custom card component  
    }  
  })  
}  
.columnsTemplate(currentBreakpoint === 'lg' ? '1fr 1fr' : '1fr') // Two columns on PC
Enter fullscreen mode Exit fullscreen mode

Effect: Two columns of cards tightly arranged on PC, super smooth scrolling experience~

3️⃣ Read and Comment Side by Side: The Magic of Left-Right Layout

Function: News and comments are stacked vertically on phones, but automatically become side-by-side (left: content, right: comments) on PC, so you can read and comment at the same time!
Core Techniques:

  • Grid layout (GridRow/GridCol):
    • Phone: Content area takes all 12 columns, comment area starts on a new row.
    • PC: Content area takes 8 columns, comment area takes 4 columns, arranged side by side.
  • Key code points: 
GridRow({ columns: { sm: 12, lg: 12 }}) {  
  GridCol({ span: { sm: 12, lg: 8 }}) { /* Content area */ }  
  GridCol({ span: { sm: 12, lg: 4 }}) { /* Comment area */ }  
}
Enter fullscreen mode Exit fullscreen mode

Effect: On PC, it's just like Bilibili's split screenβ€”watch videos and read comments at the same time!

4️⃣ Interactive Easter Eggs: Pinch to Zoom Text + Mouse & Keyboard Adaptation

  • Pinch to zoom: Use PinchGesture to listen for pinch gestures and dynamically adjust font size: 
.gesture(  
  PinchGesture()  
    .onActionUpdate((event) => {  
      this.fontSize = 14 * event.scale; // Adjust according to zoom ratio  
    })  
)
Enter fullscreen mode Exit fullscreen mode
  • Mouse/touch distinction: When clicking the comment area, show the input box directly on PC, pop up the keyboard on mobile: 
.onClick(() => {  
  if (isPC) showInputBox(); // PC logic  
  else popupKeyboard(); // Mobile logic  
})
Enter fullscreen mode Exit fullscreen mode

πŸ’‘ Practical Experience Summary

  1. Make good use of official demos: The cases in the docs are actually best practice templatesβ€”just tweak the parameters and use them!
  2. Breakpoint judgment is key: currentBreakpoint determines the layout direction, so be sure to clarify the device type first!
  3. Component reuse is king: Components like HotListItemView can save 80% of repetitive code if abstracted out!

πŸš€ One last thing: HarmonyOS's "one-write multi-device" is really addictive! Especially when you see a single codebase running perfectly on phone, tablet, and PCβ€”the sense of achievement is amazing~ Go try the official cases, and let's share our experiences in the comments!

Top comments (0)