DEV Community

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

Posted on

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

🌟[Dry Goods Alert] HarmonyOS Development Hidden Case Revealed! Step-by-step Guide to Building an Adaptive Stock APP🌟

Hello everyone! Today I'm sharing a treasure case of HarmonyOS developmentβ€”a complete practice of "develop once, deploy everywhere" for stock apps! I've dug through the official docs to find real practical tipsβ€”save this now!

πŸ’‘ Key Points First: This case uses 9 core pages (Home/Market/Favorites, etc.) to fully demonstrate the three killer features of HarmonyOS:
1️⃣ Magic of Split Layout: Auto switch between single and double columns on phone/tablet/PC
2️⃣ Adaptive Component Transformation: Grid cards intelligently adjust columns
3️⃣ Dynamic Layout Reconstruction: Grid system + breakpoint monitoring

1. Core Black Tech Analysis

🎯 The 72 Changes of Split Layout 

// Core code snippet
Navigation() {
  if (breakPoint == 'lg') { // Large screen mode
    this.mode = NavigationMode.Split // Double column display
  } else { // Phone/Tablet
    this.mode = NavigationMode.Stack // Single column stack
  }
}
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Effect: Phone portrait β†’ single column, tablet landscape β†’ double column, PC β†’ triple column, fully auto-adaptive!

πŸ“Š Smart Grid Layout Columns 

Grid() {
  GridItem() { Stock Card 1 }
  GridItem() { Stock Card 2 }
  //...
}.columnsTemplate('1fr 1fr 1fr') // Three-column layout
.columnsGap(20) // Smart spacing
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Tip: Use columnsTemplate to set column rules for different breakpoints. Small screen 1 column β†’ medium screen 2 columns β†’ large screen 3 columns

2. Must-Learn Practical Cases

Case 1: Market Page Dual Tab Transformation 

Row() {
  List() {
    ForEach(tabs1, (item)=>{/*...*/}) 
  }.onBreakpointChange((bp)=>{
    this.space = bp=='sm' ? 8 : 12 // Dynamic spacing
  })

  List() {
    ForEach(tabs2, (item)=>{/*...*/})
  }.width('70%') // Fixed width triggers truncation
}
Enter fullscreen mode Exit fullscreen mode

πŸ’‘ Development Experience:

  • When Tab exceeds the container, it auto-hides and shows "..."
  • Use Blank component for auto spacing
  • Two-finger swipe to switch hidden Tabs

Case 2: Stock PK Comparison Table 

Row() {
  Column() { /* Indicator Name */ }
    .alignItems(HorizontalAlign.Start) // Left align

  Blank() // Adaptive blank fill

  Column() { /* Stock Data */ }
    .width(100).alignItems(HorizontalAlign.End) // Fixed width, right align
}
Enter fullscreen mode Exit fullscreen mode

πŸ‘‰ Key Point: Blank component achieves flexible spacing, each column can set alignment independently

3. Development Pitfall Guide

  1. Grid Listener Debounce Handling Add a 200ms delay on breakpoint changes to avoid frequent redraws
  2. Multi-end Image Adaptation Tips 
Image($r("app.media.stock_bg"))
  .onBreakpointChange((bp)=>{
    this.source = bp=='lg' ? 'pc_bg.png' : 'mobile_bg.jpg'
  })
Enter fullscreen mode Exit fullscreen mode
  1. Performance Optimization Focus
  2. Use cachedCount to preload list items
  3. Enable drawingMode for complex charts to accelerate rendering

4. Super Useful Component Recommendations

Component Usage Scenario Official Example
WaterFlow Waterfall News Community Comment Case
Swiper Carousel Market Long Video Case
Grid Multiple Stocks in One Row Bank Wealth Management Case

✨ Conclusion:

This stock case is a textbook example of HarmonyOS adaptive layout! I suggest you try all 9 pages mentionedβ€”your development efficiency will increase by 200%! I've already built two finance apps with this pattern, and my boss gave me a bonus after seeing the multi-end adaptation effect! πŸ—

If you have more questions or want to discuss further, feel free to comment below~

Top comments (0)