Treasure Case Sharing of HarmonyOS 5 Development — One-to-Many Development Example (Image Enhancement)

🌟[HarmonyOS Development Treasure Case Sharing] A One-Stop Solution for Multi-Device Adaptive Image Beautification App!🌟

Hey friends~ Today, while browsing the HarmonyOS documentation, I stumbled upon a super practical treasure! It turns out the official team has quietly provided many "one-for-multi" development case studies. Especially this complete implementation plan for an image beautification app—I must share it with you all right away! (rubbing hands.gif)

🎨 Case Background: Image Beautification App

This case perfectly demonstrates how to use one codebase to adapt to four major terminals: phone, foldable, tablet, and PC. It includes three core features: album page, large image preview, and image editing. Let's get straight to the key points!

🛠️ Four Core Technical Highlights

1️⃣ Dynamic Column Count in Album Page (Magic Code)

// Listen for container width changes
Flex({ direction: FlexDirection.Column }) {
  ...
}.onAreaChange((oldValue: Area, newValue: Area) => {
  this.gridColumn = this.getGridColumn(newValue.width);
})

// Column calculation formula (the wider the device, the more columns)
getGridColumn(value: Length): number {
  return Math.floor(2 * ((parseInt(JSON.stringify(value)) / 360) - 1) + 4);
}

💡 Core Logic: Use onAreaChange to get the container width in real time and dynamically calculate the number of columns. For example, when a foldable device is unfolded, the number of columns increases automatically, truly achieving a breathable layout!

2️⃣ Pinch-to-Zoom in Large Image Preview

Image($r('app.media.photo'))
  .scale({ x: this.scaleValue, y: this.scaleValue })
  .gesture(
    PinchGesture({ fingers: 2 })
      .onActionUpdate((event) => {
        this.scaleValue = this.pinchValue * event.scale;
      })
  )

📱 Cross-Device Adaptation: The same gesture code supports touch screens, touchpads, and mouse wheel zoom! HarmonyOS's PinchGesture has already unified the interaction logic for us.

3️⃣ Auto-Flip Layout in Edit Page

// Horizontal device: left-right layout | Vertical device: top-bottom layout
Flex({ direction: isLandscape ? FlexDirection.Row : FlexDirection.Column }) {
  ImageArea()
  Toolbar()
}

🔄 Layout Secret: Dynamically switch the Flex main axis direction based on device orientation. One line of code achieves adaptive layout—ten times simpler than media queries!

4️⃣ Layered Architecture Design

├─ Product Customization Layer (device-specific configuration)
├─ Basic Feature Layer (shared album/edit components)
└─ Common Capability Layer (network/storage and other underlying services)

🧱 Architecture Advantage: No need to touch business code when modifying device features. To add tablet adaptation, just add configuration in the customization layer. Maintenance is maximized!

🚀 Development Pitfalls Guide

Image Caching: Use LazyForEach for lazy loading in large image lists.
Gesture Conflicts: Add .hitTestBehavior(HitTestMode.Transparent) to the zoom area for click-through.
Performance Optimization: Use the @Reusable decorator to reuse components in the filter preview of the edit page.
Multi-Device Debugging: Use DevEco Studio's "Multi-Device Preview" to view layouts in real time.

🌈 Practical Experience

I tried rewriting a company project with this solution. What originally took two weeks for adaptation was done in just three days! Especially the dynamic layout solution with onAreaChange—it's like opening a new world!

There are even more treasure cases hidden in the official docs, such as multi-screen linkage for [long video players], cross-device cart sync for [shopping apps], and more. I'll keep digging and sharing with you next time!

If you're still losing hair over multi-device adaptation, give this solution a try! If you have any questions, feel free to chat in the comments below~ 👇