DEV Community

陈杨
陈杨

Posted on

Hong Mong 5 Development Treasure Case Sharing PC Development Case Analysis

HarmonyOS PC/2in1 Development Treasure Guide: Official Case Study Analysis

Hello everyone! Recently, I've been exploring PC/2in1 app development for HarmonyOS and discovered a bunch of super practical cases hidden in the official documentation! These cases are like "hidden levels" that can help you avoid 80% of the pitfalls. Today, I've organized these treasures and will walk you through them with code examples—guaranteed to make you say "amazing" after reading!

🌟 1. Layout Design: Make the Most of Every Inch of the Big Screen

Official Core Idea: Use responsive layouts + breakpoint mechanism to dynamically adapt to different screen sizes. The key code is to add deviceTypes: ["2in1"] in module.json5, otherwise PC features won't be enabled!

1. Side Navigation Bar

Scenario: When the window width ≥ 1440vp, the bottom navigation becomes a sidebar (refer to desktop VS Code)
Core Code:

// Use SideBarContainer component
SideBarContainer() {
  Column() { /* Sidebar area */ }
  Column() { /* Main content area */ }
}
.showSideBar(this.currentBreakpoint === 'xl') // Show sidebar at xl breakpoint
.sideBarWidth(300) // Initial width
Enter fullscreen mode Exit fullscreen mode

Case Analysis:

  • Sidebar position is controlled by sideBarPosition (left/right)
  • To adjust width by dragging, listen to the onAreaChange event 👉 Full Example

2. Repeated Layouts: List/Waterfall/Grid

Pain Point: Single column on small screens → multiple columns on large screens, increasing information density
Key Properties:

  • List: List().lanes(3) (3 columns on large screens, 1 column by default on small screens)
  • Waterfall: WaterFlow().columnsTemplate('1fr 1fr 2fr') (third column is twice as wide)
  • Grid: Grid().columnsTemplate('1fr 1fr 1fr')

Code Snippet:

// Responsive Waterfall example
WaterFlow() {
  // Content items...
}
.columnsTemplate(
  currentBreakpoint === 'xl' ? '1fr 1fr 1fr' : '1fr 1fr' // 3 columns at XL breakpoint
)
Enter fullscreen mode Exit fullscreen mode

3. Carousel Optimization for Large Screens

Pro Tip: Show multiple images at once + edge reveal effect

Swiper() {
  // Carousel items...
}
.displayCount(3) // Show 3 images on large screens
.itemSpace(20)   // Spacing between images
.prevMargin(30)  // Reveal edge of previous image
.nextMargin(30)  // Reveal edge of next image
.aspectRatio(1.78) // Lock aspect ratio to prevent distortion
Enter fullscreen mode Exit fullscreen mode

👉 Practical Example

🖥️ 2. Window Adaptation: Flexible Window Tricks

1. Free Window & Immersive Mode

Required Configuration:

// module.json5
"abilities": [{
  "supportWindowMode": ["fullscreen", "split"] 
}]
Enter fullscreen mode Exit fullscreen mode

Key Features:

  • Listen to window size changes with window.on('windowSizeChange')
  • Hide title bar: windowClass.setWindowSystemBarEnable([])

2. Split View Layout (like iPad multitasking)

Combo: Navigation + SideBarContainer

Navigation() {
  SideBarContainer() {
    // Left pane
    Column() {...} 
    // Right pane
    Column() {...} 
  }
}
Enter fullscreen mode Exit fullscreen mode

🖱️ 3. Keyboard & Mouse Interaction: Make PC Experience More Native

1. Mouse Hover Effects

Official Requirement: All interactive components must support this!

Button('Submit')
.onHover((isHover) => {
  if (isHover) this.bgColor = '#e1e1e1' // Change color on hover
})
Enter fullscreen mode Exit fullscreen mode

2. Keyboard Shortcuts

Listen for global key events:

import { KeyEvent } from '@ohos.multimodalInput'

onKeyEvent(event: KeyEvent) {
  if (event.keyCode === 4097 && event.ctrlKey) { // Ctrl+S
    this.saveData()
  }
}
Enter fullscreen mode Exit fullscreen mode

Common Shortcut Key Codes:

  • Enter: 1001
  • Ctrl: 4097
  • Alt: 4098

3. Focus Navigation

Tab key to switch focus:

TextInput()
.tabIndex(1) // Set Tab order
.onFocus(() => this.showFocusStyle())
Enter fullscreen mode Exit fullscreen mode

💡 4. Pitfall Guide (Lessons Learned!)

  1. Camera Usage: PCs may have multiple cameras, use getCameraDevices() to get them dynamically
  2. Resolution Trap: Prepare three sets of image resources: hdpi/xhdpi/xxhdpi
  3. Prevent Crashes on Window Resize: Use vp units for all sizes, never hardcode px!
  4. Multi-device Test Commands: 
hdc shell aa start -a EntryAbility -b com.demo.app -d tablet
hdc shell aa start -a EntryAbility -b com.demo.app -d 2in1
Enter fullscreen mode Exit fullscreen mode

Conclusion

The HarmonyOS PC/2in1 development documentation is like a gold mine, just a bit hidden 😅. All the cases in this article come from the official "One-to-Many Development Practice" documentation—highly recommended to read together!

Bonus Challenge: Use SideBarContainer + WaterFlow to create a Bilibili-like PC homepage. Post your work in the comments for a chance to win HarmonyOS custom merchandise for 3 lucky participants! 🎁

Feel free to ask any questions below 👇 Which hidden HarmonyOS trick do you want to see next? See you in the comments!

Top comments (0)