DEV Community

陈杨
陈杨

Posted on

Treasure Case Sharing of HarmonyOS 5 Development — One-to-Many Development Example (Travel Booking)

🌟 HarmonyOS Development Treasure Discovery! In-depth Analysis of a Multi-Device Development Case (Travel Booking Edition)

Hello everyone! While browsing the HarmonyOS developer documentation today, I accidentally discovered an official "oasis of case studies"! Especially this "Travel Booking Multi-Device Development Example"—it truly showcases the magic of multi-device adaptation! Let me walk you through this treasure, step by step, to see how a single codebase can conquer four major terminals: phone, foldable, tablet, and PC!

🚀 Core Secrets of Multi-Device Development

HarmonyOS's "develop once, deploy everywhere" is far more than simple UI stretching! This booking app case in the docs demonstrates truly intelligent layouts:

  • Phone: Immersive backgrounds + gesture operations
  • Foldable: Split-pane information display
  • Tablet: Multi-tasking parallel operations
  • PC: Desktop-level interactive experience

All devices share the same codebase, automatically adapting through dynamic responsive layouts!

🎯 Three Core Page Technology Breakdowns

1️⃣ Home Page Layout: "Seventy-Two Transformations" 

// 底部导航栏智能定位
if (breakpoint === 'sm') {
  TabBar({ position: 'Bottom' })
} else {
  TabBar({ position: 'Left' })
}

// 酒店推荐流自适应
Grid() {
  ForEach(hotelList, item => {
    GridItem() {
      HotelCard(item)
        .aspectRatio(1.5) // 宽高比锁定
    }
  })
}
.columnsTemplate("repeat(auto-fill, minmax(300px, 1fr))") // 自动填充
Enter fullscreen mode Exit fullscreen mode

Key Technical Points:

  • Grid system automatically calculates breakpoints (sm/md/lg)
  • Swiper component dynamically displays image count based on screen width
  • Hot news cards scale proportionally without distortion

2️⃣ Date Selection Page: "Spatial Magic" 

// 大屏设备弹出日历层
if (deviceType === 'tablet') {
  CalendarPopup() // 平板用模态弹窗
} else {
  FullCalendarPage() // 手机跳转新页面
}

// 日期列表自适应
List() {
  ForEach(dates, date => {
    ListItem() {
      DateItem(date)
        .layoutWeight(1) // 自动均分宽度
    }
  })
}
.scrollDirection(Axis.Horizontal) // 手机端横向滚动
Enter fullscreen mode Exit fullscreen mode

Experience Optimizations:

  • Foldable devices automatically switch to dual-column layout when unfolded
  • PC supports quick selection via keyboard arrow keys
  • Holidays are automatically highlighted

3️⃣ Order Page: "Metamorphosis" 

// 支付按钮智能位移
Column() {
  if (breakpoint === 'sm') {
    PaymentFooter() // 手机底部固定
  } else {
    PaymentSidebar() // 大屏侧边悬浮
  }
}

// 车票信息流
List() {
  ForEach(tickets, ticket => {
    ListItem() {
      TicketCard(ticket)
        .constraintSize({ minHeight: 120 }) // 最小高度保障
    }
  })
}
.margin({ 
  top: vp2px(20),
  bottom: breakpoint === 'sm' ? 80 : 20 
})
Enter fullscreen mode Exit fullscreen mode

Cutting-Edge Features:

  • Swipe up to auto-hide filter bar (phone exclusive)
  • Cross-device order sync (via distributed capabilities)
  • Real-time price fluctuation visualization chart

💡 Development Pitfall Guide

  1. Breakpoint Trap: Don't hardcode screen sizes! Use @ohos.mediaquery for dynamic listening
  2. Gesture Conflicts: Special handling needed for swipe-back on phones
  3. Image Adaptation: Prepare 3 sets of resolution resources (hd/fhd/qhd)
  4. Component Library: Make good use of official responsive components (like AdaptiveContainer)

🔮 Final Thoughts

This travel booking case is just the tip of the HarmonyOS ecosystem iceberg! The official docs also hide:

  • Multi-device adaptation solutions for short video app players
  • Smart split-pane layouts for news reading apps
  • Cross-device message sync mechanisms for instant messaging

I recommend heading straight to the Developer Alliance website, searching for "Best Practices" → "Vertical Cases"—it's a whole new world! If you find any interesting cases, feel free to discuss in the comments~

(The sample code in this article comes from HarmonyOS official documentation. Implementation details are subject to the latest docs.)

Top comments (0)