DEV Community

陈杨
陈杨

Posted on

Hong Mong 5 Development Treasure Case Sharing Tablet Development Practice

Below is a practical guide for HarmonyOS tablet development, organized according to the official documentation. It combines code analysis and key pitfalls to help you efficiently achieve "develop once, deploy everywhere" 👇

1. Introduction: Why Is Tablet Development Different?

Three major features of tablets determine development strategies:

  1. Large Screen Advantage: High resolution → Need to display more content (such as split view/grid layout)
  2. Flexible Form Factor: Portrait/landscape rotation + free windowing → Must implement dynamic layout adaptation
  3. Extended Interaction: Supports keyboard and mouse → Need to add hover/focus/shortcut key logic

🔧 First Step: Project Configuration

Declare supported device types in module.json5:

"deviceTypes": ["tablet"]  // Key configuration!
Enter fullscreen mode Exit fullscreen mode

2. Core Scenario Development Details (with Code)

1. Smart Navigation Bar Dynamic Switching

Pain Point: Bottom navigation on phone → Side navigation on tablet

// Key code: Listen for breakpoint changes
@StorageLink('currentBreakpoint') breakpoint: string = 'md'; // Get breakpoint from global state

build() {
  Tabs({
    barPosition: this.breakpoint === 'lg' ? BarPosition.Start : BarPosition.End // Side on large screens
  }) {
    TabContent() { /* Home */ }
    TabContent() { /* Discover */ }
  }
  .vertical(this.breakpoint === 'lg') // Vertical arrangement on large screens
}
Enter fullscreen mode Exit fullscreen mode

Effect:

  • 📱 Phone: Bottom navigation (saves vertical space)
  • 💻 Tablet: Side navigation (uses horizontal space + always visible)

2. Waterfall Multi-Column Adaptation 

WaterFlow() {
  ForEach(this.data, item => <WaterItem item={item} />)
}
.columnsTemplate(this.breakpoint === 'lg' ? '1fr 1fr 1fr' : '1fr') // 3 columns on large screens
.itemLayout(item => item.type === 'image' ? 200 : 100) // Dynamic height
Enter fullscreen mode Exit fullscreen mode

Optimization Tips:

  • Use columnsTemplate instead of fixed column count
  • itemLayout solves misalignment caused by inconsistent content heights

3. Custom Free Window Title Bar 

// Hide system title bar + customize
window.getTopWindow().then(mainWindow => {
  mainWindow.setWindowSystemBarEnable(["status", "navigation"]) // Keep status bar
  mainWindow.setWindowLayoutFullScreen(true) // Immersive layout
});

// Custom title bar component
Header()
  .onTouch(() => {
    window.minimize() // Minimize button logic
  })
Enter fullscreen mode Exit fullscreen mode

4. Enhanced Keyboard and Mouse Interaction 

Button("Submit")
  .hoverEffect(HoverEffect.Scale) // Hover scaling effect
  .onKeyEnter(e => { // Submit on Enter key
    if (e.key === "Enter") this.submit() 
  })
Enter fullscreen mode Exit fullscreen mode

3. Pitfall Guide: Compatibility Mode

Problem Scenarios

Running a phone app directly on a tablet may cause:

  • Content stretched and distorted
  • Landscape display issues

Solutions

  1. Project Configuration: 
"deviceTypes": ["phone"] // Declare only phone devices
Enter fullscreen mode Exit fullscreen mode
  1. Split View Adaptation: 
// Split layout in landscape
if (isLandscape && isTablet) {
  Flex({ direction: FlexDirection.Row }) {
    LeftPanel()
    Divider()
    RightPanel()
  }
}
Enter fullscreen mode Exit fullscreen mode
  1. Camera Adaptation Tips: 
cameraController.setDisplayRotation(Rotation.ROTATION_90) // Fix landscape orientation
Enter fullscreen mode Exit fullscreen mode

4. Performance Optimization Checklist

Scenario Optimization Code Example
Long list scrolling Enable component reuse .cachedCount(5)
Image loading Set fixed aspect ratio .aspectRatio(16/9)
Animation lag Reduce render nodes Use <Rect>
instead of complex shapes
Memory leak Release resources in time Destroy in aboutToDisappear()

5. Conclusion: Give It a Try!

  1. Debugging Tips:
    • Enable "Force Landscape" in tablet developer options to test compatibility mode
    • Use multi-device preview in DevEco Studio for real-time layout debugging

Final Reminder:

"Tablet development is not just about stretching the interface, but restructuring information density. Master these 5 layout solutions and boost your efficiency by 50%!" — From a developer with 3 weeks of hands-on experience

Top comments (0)