一 布局

（1）垂直布局（Column）

Column（）：子组件从上到下纵向排列，最常用基础布局。

常用属性：

• justifyContent(FlexAlign.Center)：垂直居中
• alignItems(ItemAlign.Center)：水平居中

（2）水平布局（Row）

Row（）：子组件从左到右横向排列。

常用属性：

• justifyContent(FlexAlign.SpaceBetween)：左右两端分散对齐
• alignItems(ItemAlign.Center)：垂直居中

（3）相对布局（RelativeContainer）

RelativeContainer：通过ID 锚点让组件相对其他组件 / 屏幕边缘定位，适合复杂表单。

在水平方向上：可以按照起始（left）、居中（middle）或尾端（right）的组件边界与锚点对齐。当设置三个边界时，仅起始（left）和居中（middle）的边界设置生效。

在垂直方向上：可以设置组件边界与锚点对齐，具体包括顶部（top）、居中（center）和底部（bottom）。当设置三个边界时，仅顶部（top）和居中（center）生效。

（4）层叠布局（Stack）

Stack：子组件层叠堆叠，后写的组件覆盖上层，适合弹窗、头像遮罩。

Stack组件为容器组件，容器内可包含各种子元素。其中子元素默认进行居中堆叠。子元素被约束在Stack下，进行自己的样式定义以及排列。

（5）弹性布局(Flex)

Flex：兼容 Column + Row，可动态切换横向 / 纵向弹性排列，适配自适应页面。

FlexDirection.Row（默认值）：主轴为水平方向，子元素从起始端沿着水平方向开始排布。

FlexDirection.Column：主轴为垂直方向，子元素从起始端沿着垂直方向开始排布。

FlexAlign.SpaceBetween：Flex主轴方向均匀分配弹性元素，相邻子元素之间距离相同。第一个子元素和最后一个子元素与父元素边沿对齐。

二 组件

（1）轮播图（Swiper）

通过loop属性控制是否循环播放，该属性默认值为true。

当loop为true时，在显示第一页或最后一页时，可以继续往前切换到前一页或者往后切换到后一页。如果loop为false，则在第一页或最后一页时，无法继续向前或者向后切换页面。

（2）视频(Video)

Video通过调用接口来创建，接口调用形式如下：

Video(value: VideoOptions)

（3）图片(Image)

Image通过调用接口来创建，接口调用形式如下：

        Image(src: PixelMap | ResourceStr | DrawableDescriptor)

（4）选项卡(Tas)

• TabContent组件不支持设置通用宽度属性，其宽度默认撑满Tabs父组件。

• TabContent组件不支持设置通用高度属性，其高度由Tabs父组件高度与TabBar组件高度决定。

（5）文本/输入框

               1. 文本显示 (Text/Span):

Text可通过以下两种方式来创建：

• string字符串:Text('我是一段文本')

引用Resource资源:资源引用类型可以通过$r创建Resource类型对象，文件位置为/resources/base/element/string.json，具体内容如下：

        

        2.文本输入 (TextInput/TextArea/Search)

（6）按钮(Button)

Button通过调用接口来创建，接口调用有以下两种形式：

• 通过label和ButtonOptions创建不包含子组件的按钮。以ButtonOptions中的type和stateEffect为例。

                

                

• 通过ButtonOptions创建包含子组件的按钮。以ButtonOptions中的type和stateEffect为例。

• Button有四种可选类型，分别为胶囊类型（Capsule）、圆形按钮（Circle）、普通按钮（Normal）和圆角矩形按钮（ROUNDED_RECTANGLE），通过type进行设置。

  • 圆形按钮（Circle）

  • 普通按钮（Normal）

  • 圆角矩形按钮（ROUNDED_RECTANGLE）

                

        

（7）单选框 (Radio)

Radio通过调用RadioOptions来创建，以RadioOptions中的value和group为例：

1. Radio(options: {value: string, group: string})
2. 除支持通用事件外，Radio还用于选中后触发某些操作，可以绑定onChange事件来响应选中操作后的自定义行为

（8）切换按钮（Toggle）

Toggle组件提供状态按钮样式、勾选框样式和开关样式，一般用于两种状态之间的切换

Toggle通过调用ToggleOptions来创建，具体调用形式如下：

        

1. Toggle(options: { type: ToggleType, isOn?: boolean })：

   其中，ToggleType为开关类型，包括Button、Checkbox和Switch，isOn为切换按钮的状态。

   API version 11开始，Checkbox默认样式由圆角方形变为圆形。

三 掌握知识

（1）@State（@State装饰器：组件内状态）（）

被状态变量装饰器装饰的变量称为状态变量，使普通变量具备状态属性。当状态变量改变时，会触发其直接绑定的UI组件渲染更新。

（2）弹窗

        弹窗一般指打开应用时自动弹出或者用户行为操作时弹出的UI界面，用于短时间内展示用户需关注的信息或待处理的操作。

        根据用户交互操作场景，弹窗可分为模态弹窗和非模态弹窗两种类型，其区别在于用户是否必须对其做出响应

1弹出框 (Dialog)

弹出框是一种模态窗口，通常用于在保持当前上下文环境的同时，临时展示用户需关注的信息或待处理的操作。弹出框可以不与任何组件绑定，其内容通常由多种组件组成，如文本、列表、输入框、图片等，以实现布局。ArkUI当前提供了自定义和固定样式两类弹出框组件。

2路由（页面跳转）

基于router模块实现页面跳转、传参、返回

3事件回调

        1. onChange () 组件值变更事件

输入框、单选框、复选框、滑块等值发生改变时触发，携带变更后的值

        2. onClick () 点击事件

按钮、文本、容器等组件被点击时触发，无默认参数