DEV Community

陈杨
陈杨

Posted on

Hong Mong 5 Development Treasure Case Share Multi-column Development Practice

📱[HarmonyOS Developer's Treasure Guide] Master Multi-device Split Layouts at Once—Here's How!

Hello everyone! Today I found a super practical treasure in the HarmonyOS community—the official docs have hidden a bunch of real-world split layout cases! As a developer who has struggled with multi-end adaptation, discovering this "develop once, deploy everywhere" solution is a game changer! I quickly organized the key points to share with you all~ (Surprise template at the end!)

🚀 Let's See How Impressive It Is

The same codebase automatically adapts to three device types:

• Phone (sm): Clean single column

• Foldable (md): Elegant two columns

• Tablet (lg): Professional three columns

🔧 Core Toolkit

  1. Navigation Component - All-in-one Routing Container 
// Magic for adaptive single/double column switching
Navigation(this.pathInfo)
    .mode(this.currentBreakPoint === 'sm' 
        ? NavigationMode.Stack  // Single column for phone
        : this.notesNavMode)    // Double column for other devices
Enter fullscreen mode Exit fullscreen mode
  1. SidebarContainer Component - Sidebar Magician 
// Three-column secret for tablets
SideBarContainer(SideBarContainerType.AUTO) {
    Column() { /* Left sidebar */ }
    Column() { 
        Stack() { /* Nested Navigation component */ }
    }
}
.showSideBar(this.currentBreakPoint === 'lg') // Show sidebar on tablets
Enter fullscreen mode Exit fullscreen mode

🎯 Real-world Case Analysis

Case 1: Email App (Classic Three-column Structure)

// Three-column layout for tablets
build() {
    SideBarContainer(SideBarContainerType.AUTO) {
        // First column: Account list
        Column() { 
            MailSideBar() 
        }.width('30%')

        // Second + third column nesting area
        Column() {
            Navigation() {  // Two-column container
                MailList()
                MailDetail()
            }.mode(Split)
        }
    }.showSideBar(this.isLgScreen)
}
Enter fullscreen mode Exit fullscreen mode

👉 Key Tip: Nest components like Russian dolls—sidebar + double column = three-column effect!

Case 2: Calendar App (Reverse Display Logic)

// On mobile, show calendar first instead of content
Navigation(this.calendarPageInfos)
    .onNavigationModeChange((mode) => {
        if (this.isMobile) {
            this.calendarPageInfos.clear() // Hide content area on mobile
        } else {
            this.calendarPageInfos.pushPath() // Load details on large screens
        }
    })
Enter fullscreen mode Exit fullscreen mode

💡 Design Philosophy: Dynamically adjust display hierarchy based on business priority—much more flexible than rigid rules!

Case 3: Smart Customer Service (Right Sidebar Trick)

SideBarContainer(SideBarContainerType.OVERLAY)
    .sidebarPosition(SideBarPosition.End) // Show on the right
    .controlButton(new CustomChatButton()) // Custom floating button
    .onTouchOutside(() => { /* Close on outside click */ })
Enter fullscreen mode Exit fullscreen mode

🔥 Advanced Play: Fully customize sidebar position/style/interaction—easily implement floating customer service windows!

🌟 Pitfall Guide

  1. Breakpoint values must be scientific: 
// Official recommended breakpoints
const breakpoints = {
    sm: 320,  // Phone
    md: 520,  // Foldable/Small tablet
    lg: 840   // Large screen device
}
Enter fullscreen mode Exit fullscreen mode
  1. Component hierarchy must be correct: 
Correct structure:
SideBarContainer
├── Sidebar
└── Navigation
    ├── Navigation area
    └── Content area

Wrong example: Wrapping SideBarContainer with Navigation will cause layout issues!
Enter fullscreen mode Exit fullscreen mode
  1. Interaction states must be synchronized: 
// Handling orientation changes
onWindowSizeChange(newSize) {
    this.currentBreakPoint = getBreakPoint(newSize.width)
    this.$requestAnimationFrame(() => {
        this.updateLayout() // Force layout refresh
    })
}
Enter fullscreen mode Exit fullscreen mode

🎁 Bonus Dev Easter Egg

Here's a self-developed responsive utility class:

export class ResponsiveUtils {
    // Automatically listen for screen changes
    static watchScreen(callback) {
        window.addEventListener('windowSizeChange', (e) => {
            const width = e?.width || 0
            callback({
                isMobile: width < 520,
                isFoldable: width >= 520 && width < 840,
                isTablet: width >= 840
            })
        })
    }
}
// Usage example
ResponsiveUtils.watchScreen(({ isMobile }) => {
    this.showFloatingButton = !isMobile
})
Enter fullscreen mode Exit fullscreen mode

💬 Final Words

Doesn't HarmonyOS responsive layout suddenly seem much simpler? Actually, there are many more such treasure cases hidden in the official docs. Next time I find something good, I'll share it with you all right away! If you encounter any weird adaptation issues in real development, feel free to drop them in the comments and let's discuss together~

P.S. I recently used this solution to finish what used to take two weeks of adaptation work in just three days—amazing! What other HarmonyOS black tech do you want to know about? Leave a comment and I'll dig deeper next time!

Top comments (0)