ArkUI 声明式开发

ArkUI 与 SwiftUI / Jetpack Compose 思路一致：声明 UI 长什么样，由框架管理刷新。

一、布局容器

Row 横排、Column 竖排、Flex 弹性、Scroll 滚动，配合 justifyContent 与 alignItems 控制对齐：

Column({ space: 12 }) {
  Text('卡片标题').fontWeight(FontWeight.Bold)
  Text('这里是描述内容').fontSize(14).fontColor('#888')
}
.padding(16)
.backgroundColor('#fff')
.borderRadius(12)

二、状态与响应

@State 驱动本组件刷新；@Prop 接收父组件单向数据；@Link 双向同步。记住：数据变了 UI 自动变，别手动操作 DOM。

三、列表渲染

ForEach 渲染列表，注意给每一项稳定的 key：

ForEach(this.lessons, (item: string) => {
  ListItem() { Text(item).padding(12) }
}, (item: string) => item)

四、页面路由

用 Navigation 组件或 router 管理跳转，带参数跳转到详情页是常见需求：

router.pushUrl({ url: 'pages/Detail', params: { id: 1 } })

五、工程心得

先把 UI 从静态做对，再接入状态与数据。鸿蒙组件命名直观，多翻组件参考文档，效率提升很快。