DEV Community

陈杨
陈杨

Posted on

Treasure Case Sharing of HarmonyOS 5 Development — One-to-Many Development Example (Instant Messaging)

✨HarmonyOS "One-to-Many" Development Treasure Guide: Official Sample Cases, Reimagined!✨

Hello everyone! I'm an unknown coder who just finished stumbling through HarmonyOS development, and today I want to share a major discovery—HarmonyOS official documentation has already prepared tons of practical development cases for us! Especially for the headache-inducing "develop once, deploy everywhere" scenario, the official samples are packed with real-world tips and tricks! (Mind blown!)

🚀Hardcore Example: The Multi-Device Magic of an Instant Messaging App🚀

This official instant messaging sample is a real gem, directly solving three deadly pain points:

  1. How to elegantly switch layouts between phone and unfolded foldable screens?
  2. How to implement split-pane interaction on tablets and PCs?
  3. How to use a single codebase to adapt to different screen sizes?

👉 Practical Tip 1: The Legend of the Navigation Component
Check out this soul-stirring code:

// Key layout code
Navigation(this.pageInfo) {
  if (this.currentPageIndex === 0) {
    // Chat list layout
  } else if (this.currentPageIndex === 1) {
    // Contacts layout
  }
}
.mode(this.currentBreakpoint === 'sm' 
      ? NavigationMode.Stack 
      : NavigationMode.Split)
Enter fullscreen mode Exit fullscreen mode

Highlight! The mode property is the key to switching between single-column (phone) and dual-column (tablet) layouts! When 'sm' (small screen) is detected, it uses stack mode; on larger screens, it automatically switches to split mode. Super smart!

👉 Practical Tip 2: Breakpoint Adaptive Black Technology
Check out this device size detection:

// Component size adaptation
.width(Adaptive.HomeTabWidth(this.currentBreakpoint))
.height(Adaptive.HomeTabHeight(this.currentBreakpoint))
Enter fullscreen mode Exit fullscreen mode

The official adaptive.ts file presets size parameters for each breakpoint (sm/md/lg/xl), so you never have to write a bunch of media queries again!

🔥More Hidden Sample Case Reveals🔥

1️⃣ Cross-Device File Transfer Easter Egg:

// File preview component
FilePreview({
  fileType: detectFileType(file),
  previewMode: this.currentBreakpoint === 'sm' 
               ? 'vertical' : 'horizontal'
})
Enter fullscreen mode Exit fullscreen mode

Vertical preview on phones, automatic horizontal preview on tablets, even gesture operations are auto-adapted!

2️⃣ Dynamic Layout Refactoring:

// Chat input box layout
Flex({ direction: this.isLandscape 
             ? FlexDirection.Row 
             : FlexDirection.Column })
Enter fullscreen mode Exit fullscreen mode

Automatically reorganize layout for portrait/landscape, and when a foldable screen is unfolded, the input box instantly becomes a sidebar. Full marks for this move!

💡 Pitfall Avoidance Guide:

  • When using NavPathStack to manage the route stack, remember to manually clear() it when the page is destroyed
  • For foldable screen adaptation, listen to both foldStatus and breakpoint
  • For PC adaptation, pay attention to the difference between mouse hover and touch feedback

🎉Bonus at the End🎉
Tested and Usable Code Snippet:

// Smart padding settings
.padding({
  top: this.currentBreakpoint === 'lg' ? 24 : 12,
  bottom: deviceInfo.deviceType === '2in1' ? 32 : 16
})
Enter fullscreen mode Exit fullscreen mode

This padding setting keeps a comfortable visual margin on all devices. Be sure to bookmark it!

To be honest: these HarmonyOS cases are like hidden levels in a game—finding them can save you 80% of development time! Got any secret tips? See you in the comments! (And please like, comment, and follow to support my late-night efforts~) 🚀🚀🚀

P.S. If you need the complete sample source code, check the official docs and search for "One-to-Many Instant Messaging Sample"!

Top comments (0)