Harmony開發之ArkUI聲明式開發範式——用“對話“的方式寫UI 詳情 - Text,UI,Image,Android,移動開發 mb681965b2846e2 博客

引入：從命令式到聲明式的思維轉變

在傳統移動應用開發中，我們習慣了命令式編程：先創建TextView，再設置文本，然後監聽按鈕點擊事件，最後手動更新UI。這種"手把手教"的方式雖然直觀，但隨着應用複雜度增加，代碼會變得難以維護，狀態同步問題頻發。

ArkUI的聲明式開發範式徹底改變了這一局面。它讓我們從"如何構建UI"的思維中解放出來，轉而關注"UI應該是什麼樣子"。就像告訴設計師"我想要一個居中的標題和按鈕"，而不是一步步指導"先創建容器，再設置居中，然後添加文本..."。

這種思維轉變帶來的不僅是代碼量的減少，更是開發效率和可維護性的質的飛躍。本文將帶你深入理解聲明式UI的核心思想，掌握ArkUI的組件化開發方式。

講解：聲明式UI的核心機制與實戰

聲明式 vs 命令式：本質差異

命令式UI開發（傳統方式）：

// 偽代碼示例
const textView = new TextView();
textView.setText("Hello World");
layout.addComponent(textView);

button.setOnClickListener(() => {
    textView.setText("Clicked!");
});

聲明式UI開發（ArkUI）：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Column() {
      Text(this.message)
        .fontSize(30)
      Button('點擊我')
        .onClick(() => {
          this.message = 'Clicked!'
        })
    }
    .width('100%')
    .height('100%')
  }
}

核心差異對比：

關注點：命令式關注"如何做"，聲明式關注"是什麼"
狀態管理：命令式需要手動同步，聲明式自動響應
代碼量：聲明式代碼更簡潔，可讀性更高
維護性：聲明式更易於重構和測試

ArkUI聲明式開發的三要素

1. 數據驅動UI

ArkUI的核心思想是"UI是狀態的函數"。當狀態變化時，UI會自動更新，無需手動操作：

@Component
struct Counter {
  @State count: number = 0

  build() {
    Column() {
      Text(`計數: ${this.count}`)
        .fontSize(30)
      Button('+1')
        .onClick(() => {
          this.count++  // 修改狀態，UI自動更新
        })
    }
  }
}

2. 組件化設計

每個組件都是獨立、可複用的UI單元：

// 自定義用户卡片組件
@Component
struct UserCard {
  @Prop userName: string  // 從父組件傳遞的屬性
  @Prop age?: number     // 可選屬性
  @State isSelected: boolean = false

  build() {
    Column() {
      Text(this.userName)
        .fontSize(18)
      if (this.age) {
        Text(`年齡: ${this.age}`)
          .fontSize(14)
      }
    }
    .onClick(() => {
      this.isSelected = !this.isSelected
    })
  }
}

// 使用自定義組件
@Entry
@Component
struct UserList {
  build() {
    Column() {
      UserCard({ userName: '張三', age: 25 })
      UserCard({ userName: '李四' })
    }
  }
}

3. 鏈式調用與佈局系統

ArkUI採用鏈式調用方式配置組件屬性，支持靈活的佈局系統：

@Entry
@Component
struct LayoutDemo {
  build() {
    Column() {
      // 垂直佈局
      Column({ space: 20 }) {
        Text('標題')
          .fontSize(24)
          .fontWeight(FontWeight.Bold)
          .fontColor(Color.Blue)
        
        Text('副標題')
          .fontSize(16)
          .fontColor('#666')
      }
      .width('100%')
      .padding(20)
      .backgroundColor('#f5f5f5')
      
      // 水平佈局
      Row({ space: 10 }) {
        Button('按鈕1')
          .width(100)
          .height(40)
        Button('按鈕2')
          .width(100)
          .height(40)
      }
      .justifyContent(FlexAlign.Center)
    }
    .width('100%')
    .height('100%')
  }
}

常用佈局容器詳解

Column（垂直佈局）

Column容器將子組件按垂直方向排列：

Column({ space: 15 }) {
  Text('第一項')
    .fontSize(18)
  Text('第二項')
    .fontSize(18)
  Text('第三項')
    .fontSize(18)
}
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Center)  // 主軸對齊方式
.alignItems(HorizontalAlign.Center) // 交叉軸對齊方式

Row（水平佈局）

Row容器將子組件按水平方向排列：

Row({ space: 10 }) {
  Image($r('app.media.icon'))
    .width(40)
    .height(40)
  Column() {
    Text('用户名')
      .fontSize(16)
    Text('簡介')
      .fontSize(12)
      .fontColor('#666')
  }
  .layoutWeight(1)  // 權重佈局，佔據剩餘空間
  Button('關注')
    .width(60)
    .height(30)
}
.width('100%')
.padding(15)

Flex（彈性佈局）

Flex容器支持更靈活的佈局方式：

Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap }) {
  ForEach(this.items, (item) => {
    Text(item)
      .width(80)
      .height(40)
      .backgroundColor(Color.Blue)
      .margin(5)
  })
}
.width('100%')

狀態管理裝飾器

ArkUI提供了多種狀態管理裝飾器，滿足不同場景需求：

裝飾器	數據流向	跨組件共享	典型場景
`@State`	組件內部	否	組件內部狀態管理
`@Prop`	父→子（單向）	否	父組件傳遞簡單參數
`@Link`	雙向綁定	否	表單組件聯動
`@Provide`	跨層級下發	是	主題切換、多語言

示例：雙向數據綁定

// 父組件
@Component
struct Parent {
  @State message: string = 'Hello'

  build() {
    Column() {
      Text(`父組件: ${this.message}`)
      Child({ message: $message })  // 雙向綁定
    }
  }
}

// 子組件
@Component
struct Child {
  @Link message: string

  build() {
    Column() {
      Text(`子組件: ${this.message}`)
      Button('修改')
        .onClick(() => {
          this.message = 'Changed!'
        })
    }
  }
}

圖文卡片實戰案例

下面是一個完整的圖文卡片組件實現：

@Entry
@Component
struct ArticleCard {
  @State isLiked: boolean = false
  @State likeCount: number = 128

  build() {
    Column() {
      // 圖片區域
      Image($r('app.media.article_cover'))
        .width('100%')
        .aspectRatio(16/9)
        .objectFit(ImageFit.Cover)
        .borderRadius({ topLeft: 8, topRight: 8 })
      
      // 內容區域
      Column({ space: 8 }) {
        // 標題
        Text('HarmonyOS聲明式UI開發指南')
          .fontSize(18)
          .fontWeight(FontWeight.Bold)
          .fontColor('#333')
          .maxLines(2)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
        
        // 描述
        Text('深入理解ArkUI聲明式開發範式，掌握現代化UI開發技巧')
          .fontSize(14)
          .fontColor('#666')
          .maxLines(2)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
        
        // 底部信息欄
        Row() {
          // 作者信息
          Row({ space: 5 }) {
            Image($r('app.media.avatar'))
              .width(20)
              .height(20)
              .borderRadius(10)
            Text('華為開發者')
              .fontSize(12)
              .fontColor('#999')
          }
          
          // 空白佔位
          Blank()
          
          // 點贊區域
          Row({ space: 5 }) {
            Image(this.isLiked ? $r('app.media.liked') : $r('app.media.like'))
              .width(16)
              .height(16)
              .onClick(() => {
                this.isLiked = !this.isLiked
                this.likeCount += this.isLiked ? 1 : -1
              })
            Text(this.likeCount.toString())
              .fontSize(12)
              .fontColor('#999')
          }
        }
      }
      .padding(12)
    }
    .width(300)
    .backgroundColor(Color.White)
    .borderRadius(8)
    .shadow({ radius: 8, color: '#00000020' })
  }
}

卡片效果説明：

響應式交互：點擊點贊圖標，狀態自動更新，UI自動刷新
佈局靈活：使用Column、Row、Blank等容器實現複雜佈局
樣式配置：通過鏈式調用設置字體、顏色、邊距等屬性
性能優化：使用固定尺寸和百分比佈局，避免過度重繪

總結：聲明式開發的核心優勢

通過本篇學習，我們深入理解了ArkUI聲明式開發範式的核心思想：

核心優勢總結

開發效率提升：代碼量減少30%以上，減少樣板代碼
可維護性增強：UI與狀態解耦，修改邏輯無需追蹤多個更新點
性能優化：框架自動計算最小化UI變更，渲染更高效
跨設備適配：原生支持響應式佈局，一套代碼適配多端

實踐建議

組件化設計：遵循單一職責原則，將複雜頁面拆分為可複用組件
狀態管理：最小化狀態，使用合適的裝飾器管理數據流
佈局優化：避免過度嵌套，合理使用固定尺寸和百分比佈局
性能監控：使用DevEco Studio的性能分析工具，定期檢查佈局性能

下一步學習方向

在掌握了聲明式開發基礎後，建議繼續學習：

常用基礎組件：按鈕、文本、輸入框等組件的詳細用法
佈局系統進階：Flex、Grid、Stack等高級佈局容器
狀態管理進階：@Provide/@Consume、@StorageLink等高級狀態管理方案
性能優化：列表性能優化、內存管理、渲染性能調優

聲明式開發範式是HarmonyOS應用開發的核心競爭力，掌握這一範式將為你的開發之路奠定堅實基礎。建議多動手實踐，通過實際項目加深理解，真正將聲明式思維內化為開發習慣。

mb681965b2846e2 博客

mb681965b2846e2 博客

博客 / 詳情