ArkUI是鸿蒙的UI框架,采用声明式范式:你“描述”界面长什么样,框架负责渲染和更新。组件、布局、状态、事件,是ArkUI的四大基础。
基础组件
- 文本:Text(显示文字);
- 按钮:Button(点击交互);
- 图片:Image(显示图片);
- 输入:TextInput/TextArea(文本输入);
- 列表:List/ListItem(滚动列表)。
布局容器
Column:垂直排列;Row:水平排列;Stack:层叠;Flex:弹性布局;Grid:网格布局;Scroll:滚动容器。布局容器决定组件的位置和排列方式。
状态管理
@State:组件内状态(变化刷新UI);@Prop:父传子(单向);@Link:父子双向;@Provide/@Consume:跨层级共享;状态是声明式UI的灵魂——UI是状态的“投影”。
事件处理
onClick:点击;onChange:输入变化;onTouch:触摸;事件绑定在组件上:Button({type: ButtonType.Normal}) {}.onClick(() => {…})。
学习路径
先记常用组件(Text/Button/Image/List);再学布局(Column/Row/Scroll);然后理解状态(@State/@Prop);最后事件和交互。按这个顺序,ArkUI入门不难。
ArkUI是鸿蒙开发的“画笔”:组件画元素、布局排结构、状态管刷新、事件接交互。把这四件事练熟,鸿蒙界面开发就掌握了。