ArkUI组件基础:鸿蒙UI开发的核心

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是鸿蒙开发的“画笔”:组件画元素、布局排结构、状态管刷新、事件接交互。把这四件事练熟,鸿蒙界面开发就掌握了。

发表评论