鸿蒙开发学习笔记 #2

学习时间: 2026-03-14 00:45

主题: ArkUI 声明式开发与基础组件

---

1. ArkUI 声明式开发范式

1.1 核心思想

ArkUI 采用声明式开发范式，开发者描述 UI 期望的结构和状态，系统自动渲染。

// 声明式 vs 命令式

// ❌ 命令式 (传统)
const div = document.createElement('div')
div.innerText = 'Hello'
document.body.appendChild(div)

// ✅ 声明式 (ArkUI)
@Entry
@Component
struct MyComponent {
  build() {
    Text('Hello')
  }
}

1.2 组件化思想

• **Component**: UI 组件的基本单元
• **Element**: 渲染树中的节点
• **RenderNode**: 渲染节点

---

2. 基础组件

2.1 Text 文本

Text('显示文本')
  .fontSize(20)           // 字体大小
  .fontColor('#FF0000')   // 字体颜色
  .fontWeight(FontWeight.Bold)  // 字重
  .textAlign(TextAlign.Center)  // 对齐方式
  .maxLines(2)            // 最大行数
  .textOverflow({ overflow: TextOverflow.Ellipsis })  // 省略

2.2 Button 按钮

// 普通按钮
Button('点击')
  .onClick(() => {
    console.log('按钮被点击')
  })

// 图标按钮
Button({ type: ButtonType.Circle }) {
  Image($r('app.media.icon'))
    .width(20)
    .height(20)
}

// 按钮类型
// - ButtonType.Normal: 普通按钮
// - ButtonType.Circle: 圆形按钮
// - ButtonType.Text: 文字按钮

2.3 Image 图片

// 本地图片
Image($r('app.media.logo'))
  .width(100)
  .height(100)
  .borderRadius(10)

// 网络图片
Image('https://example.com/image.png')
  .alt($r('app.media.placeholder'))  // 加载占位

// 常用属性
.imageFit(ImageFit.Contain)  // 缩放模式

2.4 TextInput 输入框

@State inputText: string = ''

TextInput({ placeholder: '请输入内容', text: $$this.inputText })
  .type(InputType.Number)    // 输入类型
  .maxLength(10)             // 最大长度
  .onChange((value: string) => {
    this.inputText = value
  })

2.5 List 列表

@State data: string[] = ['项目1', '项目2', '项目3']

List({ space: 10 }) {
  ForEach(this.data, (item: string) => {
    ListItem() {
      Text(item)
        .fontSize(20)
        .padding(10)
    }
  })
}

---

3. 布局组件

3.1 Column 垂直布局

Column({ space: 20 }) {
  Text('第一项')
  Text('第二项')
  Text('第三项')
}
.width('100%')
.height('100%')
.alignItems(HorizontalAlign.Center)  // 水平对齐
.justifyContent(FlexAlign.Center)    // 垂直对齐

3.2 Row 水平布局

Row({ space: 10 }) {
  Image($r('app.media.icon')).width(30)
  Text('标题').fontSize(18)
}
.width('100%')
.alignItems(VerticalAlign.Center)

3.3 Flex 弹性布局

Flex({
  direction: FlexDirection.Row,
  justifyContent: FlexAlign.SpaceBetween,
  alignItems: ItemAlign.Center
}) {
  Text('左')
  Text('中')
  Text('右')
}
.height(60)
.padding(10)

3.4 Stack 堆叠布局

Stack({ alignContent: Alignment.BottomEnd }) {
  Image($r('app.media.background'))
  Text('覆盖在图片上的文字')
    .fontColor(Color.White)
    .padding(10)
}
.width(200)
.height(200)

---

4. 状态管理

4.1 @State - 组件状态

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

  build() {
    Column() {
      Text(`计数: ${this.count}`)
        .fontSize(30)
      
      Button('+1')
        .onClick(() => {
          this.count++  // 状态变化触发UI更新
        })
    }
  }
}

4.2 @Prop - 父子传值

// 父组件
@Entry
@Component
struct Parent {
  build() {
    Child({ title: '传入的标题' })
  }
}

// 子组件
@Component
struct Child {
  @Prop title: string = ''

  build() {
    Text(this.title)
  }
}

4.3 @Link - 双向绑定

// 父组件
@Entry
@Component
struct Parent {
  @State parentCount: number = 0

  build() {
    Column() {
      Text(`父组件: ${this.parentCount}`)
      Child({ childCount: $parentCount })
    }
  }
}

// 子组件
@Component
struct Child {
  @Link childCount: number

  build() {
    Button('子组件+1')
      .onClick(() => {
        this.childCount++  // 同时更新父子状态
      })
  }
}

4.4 @Provide / @Consume 跨层级传值

// 祖先组件
@Entry
@Component
struct Ancestor {
  @Provide message: string = '祖先消息'

  build() {
    Column() {
      Descendant()
    }
  }
}

// 后代组件
@Component
struct Descendant {
  @Consume message: string

  build() {
    Text(this.message)
  }
}

---

📝 今日学习总结

ArkUI 声明式开发范式

基础组件: Text, Button, Image, TextInput, List

布局组件: Column, Row, Flex, Stack

状态管理: @State, @Prop, @Link, @Provide/@Consume

🔜 下节预告

Ability 生命周期与页面路由

---

笔记持续更新中...