HarmonyOS 6 Deep Dive: Four Core Capabilities for Multi-Device, AI, UI & Live Views

Chapter 1: "One-to-Many" Capability and Navigation Bar Design

1.1 What is "One-to-Many" Capability

HarmonyOS 6 addresses the challenge of diverse device forms (phones, tablets, foldables, 2-in-1s) by providing a systematic solution across three layers:

Engineering-level: Three-layer architecture (base, feature, product) with HAR/HSP package management enables unified code management and selective deployment per device.

Function-level: API Capability binding automatically selects appropriate API implementations based on hardware capabilities (e.g., advanced camera modes on multi-camera devices, basic photo on others).

UI-level: Responsive layout tools including GridRow/GridCol grid system, Flex layout, breakpoint-based adaptation (sm: 320-600vp, md: 600-840vp, lg: 840vp+), and unified HarmonyOS Design System for visual consistency.

1.2 Responsive Tab Bar Practical Case

A complete ResponsiveTabBar component demonstrates automatic layout switching: bottom horizontal tabs on phones/foldable small screens (sm/md), left vertical sidebar on tablets/2-in-1s (lg). The component uses GridRow with breakpoints ['320vp','600vp','840vp'] and onBreakpointChange callback to react to window size changes without manual device detection.

Core Component Design Analysis

Data Interface: TabItem interface with icon, selectedIcon, label.

Responsive Layout Core: GridRow with breakpoint configuration and column spans per breakpoint.

Conditional Rendering: if (this.currentBreakpoint === 'lg') renders vertical Tabs with barPosition: BarPosition.Start, barWidth: 80; else horizontal Tabs with barPosition: BarPosition.End, barHeight: 56.

State Management: @State currentIndex, selectedIndex, currentBreakpoint; onChange and onAnimationStart synchronize selection.

Custom TabBar Builder: @Builder tabBuilder dynamically switches icons, adjusts margins (8vp vs 4vp), font sizes (12fp vs 10fp) based on breakpoint.

BreakpointSystem: Utility class registering/unregistering breakpoint listeners in aboutToAppear / aboutToDisappear to avoid memory leaks.

Usage Example

Integration in Index.ets imports the component, defines tabItems array with resource references ( $r('app.media.home')), provides a @Builder buildTabContent for lazy rendering, and passes props ( fontColor, selectedFontColor, autoBackgroundColor, contentBuilder). Practice suggestions: 48x48 or 72x72 PNG icons, consistent brand color for selected state, 3-5 tabs for mobile.

Chapter 2: HarmonyOS Agent Development

2.1 Agent Overview

HarmonyOS Agent (via Xiaoyi Open Platform) provides natural language understanding, scenario-based services, multimodal interaction, and cross-app collaboration. Once configured, the agent can be integrated via AgentFrameworkKit.

2.2 Xiaoyi Agent Installation & Deployment

Step-by-step creation of a "Chinese Poetry Fairy" agent:

Access Xiaoyi Open Platform, click "Experience Now".

Configure core info: name ("Chinese Poetry Fairy"), opening dialogue (role-immersive, functional preview, emotional connection), and role definition (core positioning, five core capabilities: poetry reservoir, interactive creation, analysis & Q&A, fun interaction, scene adaptation; four behavioral guidelines: language style, professionalism, interactivity, positive guidance).

Online testing via debug panel: test basic Q&A, creative requests, interactive games, boundary cases.

Submit for review (enterprise/individual certification required, 1-3 business days).

2.3 Integrating Agent in Project

Minimal integration code using FunctionComponent from @kit.AgentFrameworkKit:

import { BusinessError } from "@kit.BasicServicesKit";
import { hilog } from "@kit.PerformanceAnalysisKit";
import { FunctionComponent } from "@kit.AgentFrameworkKit";

@Entry
@Component
struct AiChat {
  private agentId: string = 'agentxxxxxxxxx9499';
  build() {
    Column() {
      FunctionComponent({
        agentId: this.agentId,
        onError: (err: BusinessError) => {
          hilog.error(0x0001, 'FunctionExample', `err code: ${err.code}, message: ${err.message}`);
        },
        options: {
          title: 'Smart Create',
          queryText: 'Create a new pattern',
          isShowShadow: true
        }
      })
    }
  }
}

Key points: agentId from platform URL; onError handles common codes (401 unauthorized, 404 not found, 500 server error); options customizes UI. Prerequisites: add ohos.permission.INTERNET in module.json5, ensure DevEco Studio supports API 12+.

Chapter 3: UI Design Kit Design Tools

3.1 Introduction

UI Design Kit is Huawei's official UI component library based on HarmonyOS Design System, offering 11+ advanced components with diverse styles, built-in light/shadow effects, and strict design compliance. It solves pain points of manual complex UI implementation, inconsistent team styles, heavy animation code, and repetitive multi-device adjustments.

3.2 Core Components

HdsNavigation

+ HdsNavDestination: navigation stack management. HdsSideBar: collapsible sidebar for tablets. HdsSnackBar: modern non-modal notifications replacing Toast. HdsSideMenu: menu bars for settings/filters. HdsActionBar: floating action bar with expand/collapse animation. HdsTabs: tab container with divider styles. HdsListItem + HdsListItemCard: swipeable list items with card visuals. HdsVisualComponent: complex visual effects (frosted glass, shadows). MultiWindowEntryInAPP: multi-window support for tablets.

Selection guidelines: navigation scenes use HdsNavigation + HdsNavDestination; notifications use HdsSnackBar; lists use HdsListItem + HdsListItemCard; floating actions use HdsActionBar.

3.3 Practical Case: HdsActionBar

Implements a floating action bar with expand/collapse animation, dynamic main button icon (+ ↔ play), real-time hover tips. State managed with @Local (internal-only): isExpand, isPrimaryIconChanged, primaryHoverTips, timerRunning, recordingActive. Configuration includes startButtons (stopwatch), endButtons (mic), primaryButton with baseIcon and altIcon, actionBarStyle bound to isPrimaryIconChanged, and isExpand controlling visibility. System Symbol icons ( $r('sys.symbol.stopwatch_fill')) ensure visual consistency. Extension tips: up to 3 buttons per side, customize colors/sizes via ActionBarStyle.

Chapter 4: Live View Kit Real-Time Preview

4.1 Technical Analysis

Live View Kit (Live View) displays real-time dynamic info in system-level scenarios: lock screen, notification center, status bar. Compared to traditional notifications: silent real-time updates vs low-frequency push; capsule + card dual forms vs single card; three touchpoints vs notification center only; active viewing vs passive reception.

Typical scenarios: food delivery progress, fitness tracking, music playback, countdown timers.

4.2 Permissions & Setup

Enable Push Service in AppGallery Connect to obtain AppId and AppSecret for cloud updates.

Add test devices via "Debug Device Management" using Push Token; test devices bypass permission checks.

Important: Debug phase must validate display effects and data logic; screenshots required for formal permission application.

4.3 Updating Live View

Cloud update flow: app backend detects data change → calls Push API with Live View data → Huawei Push Service pushes to device → system renders updates on lock screen, notification center, status bar. Key: silent push (no user interruption), JSON Schema compliance, supports high-frequency updates (e.g., sports data).

4.4 Display Forms & Scenes

Capsule: concise key info (≤15 chars), status bar.

Card: rich content (icons, progress bars, buttons), notification center & lock screen.

Scene analysis: notification center (full card), status bar (persistent capsule, tap to expand/app), lock screen (no unlock needed, ideal for frequent checks). Design guidelines: brand colors, avoid overly complex cards.

4.5 Development Workflow Summary

Enable Push Service → get AppId/AppSecret.

Design Live View UI → write JSON data template.

Integrate Live View Kit → create Live View in app.

Add debug devices → real-device verification.

Backend calls Push API → real-time updates.

Submit for review → obtain formal permission & launch.

Summary

The four capabilities synergize: "One-to-Many" builds responsive framework; UI Design Kit delivers polished UI; Agent adds AI interaction; Live View Kit boosts engagement and retention. Official API references provided for each capability.