DEV Community

陈杨
陈杨

Posted on

Treasure Case Sharing of HarmonyOS 5 Development — One-to-Many Development Example (Banking and Wealth Management)

✨ HarmonyOS Development Treasure Case Giveaway! Today, let’s walk you through the "One-to-Many" Bank Wealth Management App ✨

Hey, HarmonyOS developers! Today I found a real treasure in the official docs—turns out HarmonyOS hides so many super practical "one-to-many" development cases! Especially this bank wealth management app solution, which is simply a textbook for cross-device development. I’ve stayed up late to organize this development guide for you, guaranteed to make you exclaim, “I didn’t know you could do it like this!”

1. Why is this case worth saving?

This bank wealth management app perfectly demonstrates how to use one set of code to handle adaptation for phones, tablets, smart screens, and more. The most impressive are these three awesome features:

  1. Smart Dialogs: Automatically adjusts dialog size based on device
  2. Fluid Layouts: Lists adaptively change the number of columns like Transformers
  3. Split View Magic: Single column on phone instantly becomes dual column on PC

2. Three Core Tech Highlights

🎯 Case 1: Shape-shifting Smart Dialog

Effect Comparison:

  • Phone: 380x620 medium dialog
  • Tablet: 520x800 large dialog
  • PC: 600x900 fullscreen dialog

Key Code:

// Dialog size adaptation
.width(new BreakpointUtil({
  sm: $r('app.float.dialog_width_sm'),  // Phone
  md: $r('app.float.dialog_width_md'),  // Tablet
  lg: $r('app.float.dialog_width_lg')   // PC
}).getValue(this.currentPoint))
Enter fullscreen mode Exit fullscreen mode

Dev Tips:

  • Use @StorageProp to listen for device breakpoint changes in real time
  • CustomDialogController manages dialog lifecycle
  • Use the lanes property for fluid column layouts

🌟 Case 2: List Transformation

Column Changes:

  • Phone: 2 columns → Tablet: 3 columns → PC: 5 columns

Code Example:

// Dynamically load different amounts of data
ForEach(new BreakpointUtil({
  sm: getFundData(0,5),    // Phone loads 5 items
  md: getFundData(0,8),    // Tablet loads 8 items
  lg: getFundData(0,12)    // PC loads 12 items
}), (item)=>{...})
Enter fullscreen mode Exit fullscreen mode

Layout Secret:

.lanes({  // Dynamic column setting
  sm: 2,
  md: 3,
  lg: 5
}, $r('app.float.list_space'))  // Adaptive spacing
Enter fullscreen mode Exit fullscreen mode

💡 Case 3: Split Layout’s 72 Transformations

Mode Switching:

  • Small screen: Stack mode (single column stacking)
  • Large screen: Split mode (dual column side-by-side)

Core Code:

.mode(this.breakPoint === 'lg' ? 
  NavigationMode.Split :  // Split mode
  NavigationMode.Stack)  // Stack mode
Enter fullscreen mode Exit fullscreen mode

Navigation Bar Adaptation:

.navBarWidth('30%')  // Sidebar fixed ratio
.hideTitleBar(true)  // Hide title bar on large screens
Enter fullscreen mode Exit fullscreen mode

3. More Practical Tips

  1. Responsive Images: Use <Image>.objectFit(ImageFit.Contain) for adaptive scaling
  2. Gesture Interaction: Use PanGesture to detect left/right swipe for product switching
  3. Data Sync: Use @StorageLink for cross-device state sync
  4. Smooth Animation: animateTo for silky split view expansion animation

5. A Few Words from the Heart

Honestly, when I first started with "one-to-many" development, breakpoint adaptation gave me a headache. But after practicing with these official cases, I found that HarmonyOS has already paved the way for us. I recommend everyone to dig into the developer community—many problems have already been solved by pioneers.

If you want to see case analysis in other fields, feel free to comment! Next time, I might bring a deep dive into "Smart Home" or "In-Vehicle Apps"—it’s up to you what you want to see~

Finally, here’s a saying for you: Good code isn’t just written, it’s “copied”—of course, copied from excellent official cases! 🎉

Top comments (0)