一、聲明式UI框架指南

1. 組件創(chuàng)建與配置

   • 無參數(shù)組件：Column() { ... }
   • 有參數(shù)組件：Image('https://xyz/test.jpg')
   • 屬性配置：Text('test').fontSize(12).fontColor(Color.Red)
   • 事件處理：Button('Click me').onClick(() => { this.count++ })

2. 布局容器核心用法

   • Column：垂直布局容器，主軸為垂直方向

     Column({ space: 10 }) {
       Text('item 1').fontSize(20)
       Text('item 2').fontSize(20)
     }.alignItems(HorizontalAlign.Center)
     

   • Row：水平布局容器，主軸為水平方向

     Row({ space: 15 }) {
       Text('item A').backgroundColor('#00f')
       Text('item B').backgroundColor('#f00')
     }.justifyContent(FlexAlign.SpaceBetween)
     

   • Stack：層疊布局容器

     Stack() {
       Image('bg.jpg').size({ width: 300, height: 200 })
       Text('Overlay Text').position({ x: 20, y: 20 })
     }
     

二、狀態(tài)管理最佳實(shí)踐

1. @State裝飾器核心特性

   • 組件內(nèi)部狀態(tài)管理，值變化觸發(fā)UI自動(dòng)刷新
   • 支持類型：string/number/boolean/object/數(shù)組等
   • 必須本地初始化：@State count: number = 0

2. 響應(yīng)式更新機(jī)制

   • 簡單類型直接賦值：this.count = 1
   • 對象類型需整體賦值：this.user = { ...this.user, name: 'new' }
   • 數(shù)組操作：this.list.push(newItem) 或 this.list[0] = newValue

3. 典型應(yīng)用示例

   @Component
   struct CounterComponent {
     @State count: number = 0
     
     build() {
       Column() {
         Text(`當(dāng)前計(jì)數(shù): ${this.count}`).fontSize(24)
         Button('增加計(jì)數(shù)').onClick(() => {
           this.count++ // 自動(dòng)觸發(fā)UI刷新
         })
       }
     }
   }
   

三、分布式API與跨設(shè)備協(xié)同

1. 媒體會(huì)話(AVSession)基礎(chǔ)

   // 創(chuàng)建媒體會(huì)話
   const session = await avSession.createAVSession(context, 'video_session', 'video')
   await session.setAVMetadata({
     title: '示例視頻',
     duration: 3600
   })
   await session.activate()
   

2. 投播組件(AVCastPicker)集成

   import { avCast } from '@kit.AVSessionKit'
   
   // 喚起設(shè)備選擇面板
   const picker = new avCast.AVCastPicker()
   picker.show(session.sessionId)
   
   // 監(jiān)聽投播狀態(tài)變化
   session.on('castStateChange', (state) => {
     console.log('投播狀態(tài):', state) // CONNECTING/CONNECTED/DISCONNECTED
   })
   

3. 投播控制器(AVCastController)用法

   // 獲取控制器
   const castController = await session.createCastController()
   
   // 基本控制
   castController.sendControlCommand({ command: 'play' })
   castController.sendControlCommand({ command: 'pause' })
   castController.setPlaybackPosition(120) // 跳轉(zhuǎn)到120秒
   

四、跨設(shè)備投屏完整案例

1. 手機(jī)-智慧屏投屏實(shí)現(xiàn)步驟

   • 步驟1：創(chuàng)建并激活媒體會(huì)話
   • 步驟2：初始化投播組件并監(jiān)聽狀態(tài)
   • 步驟3：通過投播控制器發(fā)送控制指令
   • 步驟4：處理遠(yuǎn)端設(shè)備狀態(tài)回調(diào)

2. 核心代碼示例

   // 1. 創(chuàng)建媒體會(huì)話
   async createMediaSession(context: Context) {
     const session = await avSession.createAVSession(context, '投屏演示', 'video')
     session.setExtras({ requireAbilityList: ['url-cast'] })
     await session.activate()
     return session
   }
   
   // 2. 初始化投播功能
   initCast(session: avSession.AVSession) {
     // 顯示設(shè)備選擇面板
     const picker = new avCast.AVCastPicker()
     picker.show(session.sessionId)
     
     // 監(jiān)聽連接狀態(tài)
     session.on('castStateChange', async (state) => {
       if (state === 'CONNECTED') {
         const controller = await session.createCastController()
         this.startRemoteControl(controller)
       }
     })
   }
   
   // 3. 遠(yuǎn)程控制實(shí)現(xiàn)
   startRemoteControl(controller: avCast.AVCastController) {
     // 播放控制
     this.remoteController = controller
   }
   

五、布局實(shí)戰(zhàn)技巧

1. 主軸與交叉軸控制

   • Column組件：主軸垂直，交叉軸水平

     Column() {
       Text('上').width('100%')
       Text('中').width('100%')
       Text('下').width('100%')
     }.justifyContent(FlexAlign.SpaceBetween) // 主軸對齊
      .alignItems(HorizontalAlign.Center) // 交叉軸對齊
     

   • Row組件：主軸水平，交叉軸垂直

     Row() {
       Text('左')
       Text('中')
       Text('右')
     }.justifyContent(FlexAlign.SpaceAround)
      .alignItems(VerticalAlign.Center)
     

2. 復(fù)雜布局嵌套示例

   Column() {
     // 標(biāo)題區(qū)域
     Row() {
       Image('logo.png').width(40).height(40)
       Text('應(yīng)用標(biāo)題').fontSize(20).margin({ left: 10 })
     }.width('100%').padding(15)
     
     // 內(nèi)容區(qū)域
     Stack() {
       Image('bg.jpg').size({ width: '100%', height: 200 })
       Column() {
         Text('疊加文本').fontColor(Color.White)
         Button('操作按鈕').margin({ top: 10 })
       }.alignItems(HorizontalAlign.Center)
     }
     
     // 列表區(qū)域
     List() {
       ForEach(this.items, (item) => {
         ListItem() {
           Text(item.name).padding(10)
         }
       })
     }.height(300)
   }
   

鴻蒙開發(fā)學(xué)習(xí)