DEV Community

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

Posted on

Treasure Case Sharing of HarmonyOS 5 Development β€” One-to-Many Development Example (Long-form Video)

[🌟HarmonyOS Development Treasure Cases Revealed! So many great resources hidden in the official docs!

Hello everyone~ Recently, while tinkering with HarmonyOS app development, I accidentally discovered a bunch of super practical development cases hidden in the official documentation! Especially the "One-to-Many Development" example for long video appsβ€”after reading it, I was amazed: "So it can be done like this!" Today, let's dig into these hidden treasures together, with step-by-step code analysis!

πŸ”₯ Long Video App Case: One Development for Four Types of Devices

Core Features: Home waterfall recommendations, smart search, watch and comment, full-screen playback

Supported Devices: Mobile/Foldable/Tablet/PC all supported!

πŸ› οΈ Multi-Device Adaptation Tricks

1. Dynamic Grid Layout on Home Page

  • Mobile Portrait: Two-column video stream
  • Tablet Landscape: Three columns + immersive banner
  • PC Large Screen: Side navigation + 4K video preview 
// Dynamic grid listening code snippet
GridRow({ columns: { sm: 4, md: 8, lg: 12 }}) {
  GridCol({ span: { sm: 4, md: 4, lg: 3 }}) {
    VideoCard().aspectRatio(16/9) // Adaptive aspect ratio
  }
}
Enter fullscreen mode Exit fullscreen mode

2. Foldable Screen Magic

  • Half-fold hover playback
  • Auto switch to split-screen mode when unfolded 
// Fold crease region detection
display.getCurrentFoldCreaseRegion().then(region => {
  if(region.creaseRects.length > 0) {
    this.avoidArea = region.creaseRects[0]
  }
})
Enter fullscreen mode Exit fullscreen mode

πŸ’‘ Must-Learn Core Tech Points

  1. ArkUI Reactive Three Moves
    • Breakpoint listening:<font style="color:rgba(0, 0, 0, 0.9);background-color:rgb(252, 252, 252);">@ohos.mediaquery</font>
    • Flexible layout:<font style="color:rgba(0, 0, 0, 0.9);background-color:rgb(252, 252, 252);">Flex+Percentage</font>
    • Component reuse: HAR package cross-project call
  2. Project Management Tips 
project/
β”œβ”€ common/         # Common utility package
β”œβ”€ features/       # Feature modules 
β”‚  β”œβ”€ home/        # Home HAR
β”‚  └─ player/      # Player HAR
└─ products/       # Device-specific adaptation
   β”œβ”€ phone/       # Mobile enhancements
   └─ pc/          # Keyboard shortcuts
Enter fullscreen mode Exit fullscreen mode

🎯 More Practical Case Recommendations

Case 1: E-commerce App (Double 11 Special)

  • Mobile: Vertical product waterfall
  • Tablet: Left category navigation + right products
  • PC: Three-column layout (category/product/detail on the same screen) 
// Product card adaptation
@Component
struct GoodsCard {
  @Prop isPC: boolean = false

  build() {
    Column() {
      Image($r('app.media.product')).height(this.isPC ? 200 : 120)
      Text('Product Name').fontSize(this.isPC ? 18 : 14)
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Case 2: News App (Free Switch Between Portrait and Landscape)

  • Portrait: Title list + thumbnail
  • Landscape: Left navigation + right mixed text and images
  • Keyboard adaptation: Arrow keys to switch focus, Enter to open details

πŸš€ Pitfall Guide: Common Issues in Multi-Device Development

  1. Image Distortion: ❌ Wrong approach: Fixed width and height βœ… Correct solution: `.aspectRatio()+objectFit**

plain
Image($r('app.media.banner'))
.aspectRatio(16/9)
.objectFit(ImageFit.Cover)

  1. Interaction Conflicts:
    • Disable mouse hover effects on mobile
    • Add keyboard shortcuts on PC

`plain
@State hoverEffect: boolean = false

Button('Buy Now')
.onHover(() => {
if(!isMobile){
this.hoverEffect = !this.hoverEffect
}
})
`

πŸ‘‰ Learning Shortcuts:

  1. IDE built-in template: Check "Multi-device Template" when creating a new project
  2. Debugging tool:<font style="color:rgba(0, 0, 0, 0.9);background-color:rgb(252, 252, 252);">Previewer</font>Real-time device switching
  3. Official community: Live Q&A every Thursday at 8pm (search "HarmonyOS Night Talk")

After reading, do you feel that "One-to-Many Development" in HarmonyOS is not that mysterious? In fact, as long as you master adaptive layout + modular design, conquering multiple devices with one set of code is really easy! What other tricky adaptation problems have you encountered in development? Feel free to discuss in the comments~

Top comments (0)