一.轮播图

  轮播容器，自动承载多张页面横向 / 纵向滑动切换，自带指示器、自动播放、循环切换功能。

1.1常用核心属性

   indicator(boolean) true：显示底部小圆点指示器；false 隐藏指示器。

   autoPlay(boolean) true：自动轮播；false 仅手动滑动。

   interval(number) 自动播放间隔，单位毫秒，例 interval(3000) 3 秒切换一页。

   loop(boolean) true：循环轮播，滑到最后一页可切回第一页；默认开启。

   vertical(boolean) true：纵向上下滑动；false 默认左右横向滑动。

   index(number) 默认显示第几页，从 0 开始计数

   onChange((idx:number)=>{}) 页面切换时触发回调，idx 为当前页面下标。

1.2代码演示

二.视频--video

  Video 组件用于播放和控制视频，常见于短视频或应用内视频列表页：视频完整显示时自动播放，点击区域可暂停并显示进度条，拖动进度条能跳转播放位置。

 视频格式：ArkUI Video 组件原生优先兼容 MP4（H.264 视频编码 + AAC 音频编码），兼容性最好

2.1加载本地视频

2.1.1普通本地视频。

 加载本地视频时,需在工程资源的rawfile目录中放  置视频文件,如下图所示。

2.1.1.1代码演示

2.1.2加载网络视频

  加载网络视频时，需要申请ohos.permission.INTERNET权限，Video的src属性为网络视频的链接。

2.1.2.1代码演示

修改配置文件，在module.json5中添加下面的代码

三.图片

  Image 是鸿蒙 ArkUI 核心组件，用于加载并显示图片资源，支持本地资源、网络图片、rawfile、沙箱文件等多种来源，可控制样式、缩放、事件交互等。

3.1图片加载方式

 media目录资源

 路径：entry/src/main/resources/base/media/

3.2核心样式属性

3.3代码演示

四.选项卡--Tabs

  Tabs 多标签切换组件，实现页面分栏切换（首页 / 我的 / 消息这类底部导航、顶部分类栏），搭配 TabContent 使用。

4.1基础结构

 Tabs：根容器，承载标签栏与页面内容

 TabContent：单页内容，通过 .tabBar("文字") 快速生成底部标签

     ——对应：一个 TabContent 对应一个底部标签

4.2Tabs组件布局示意图

4.3代码演示

五.文本/输入框

  Text 用于展示文字内容，是页面最基础文本组件，支持文字样式、换行、省略、事件、富文本、对齐、行间距等全部文本能力。

5.1基础调用语句

        Text('我是一段文本')

5.2文字样式属性

5.2.1字号、颜色、字体

  fontSize(number)：文字大小，数字单位 fp

  fontColor(Color.ResourceColor)：文字颜色

  fontFamily(string)：字体，系统字体 / 自定义字体

  fontWeight(FontWeight)：字体样式

     FontWeight.Normal 正常、Bold 粗体、Lighter 细、Bolder 超粗

5.2.2文字修饰

 fontStyle(FontStyle.Italic)：斜体，Normal 正常

 decoration(TextDecoration) 文字划线

        None 无划线、Underline 下划线、LineThrough 删除线、Overline 上划线

  decorationColor() 划线颜色、decorationThickness()划线粗细

5.2.3对齐与布局属性

 textAlign(TextAlign) 文字内部对齐Center 居中、Start 左对齐、End 右对齐

 textAlign 仅在设置宽度后生效

 width()/height()：文本容器宽高

 padding() 文字内边距

 margin() 外边距

    lineHeight 行高（行间距）

5.3代码演示

5.4文字输入框

 TextInput 单行输入文本框，用于接收用户输入账号、密码、昵称等单行内容；

5.4.1. 基础输入内容

1. text：绑定输入框默认文字
2. placeholder：提示文字（无输入时显示灰色提示）
3. placeholderColor：占位文字颜色

5.4.2. 输入类型 type（常用）

  InputType.Normal：普通文本（默认）

  InputType.Password：密码框，内容圆点隐藏

5.4.3.输入限制

 maxLength：最大输入字符长度

5.4.4.边框/背景样式

 backgroundColor 输入框背景

 border 边框

 borderRadius 圆角

 padding 内边距

 width/height 尺寸

5.4.5代码演示

六.按钮

Button 是交互按钮组件，用于点击触发功能，支持文字按钮、图片按钮、图文混合按钮，提供多种样式、状态、点击事件。

6.1按钮类型

6.1.1胶囊按钮（默认类型）。

 此类型按钮的圆角自动设置为高度的一半，不支持通过borderRadius属性重新设置圆角。

6.1.2圆形按钮

 此类型按钮为圆形，不支持通过borderRadius属性重新设置圆角。

6.1.3普通按钮。

 此类型的按钮默认圆角为0，支持通过borderRadius属性重新设置圆角。

6.1.4圆角矩形按钮

  当controlSize为NORMAL时，默认圆角大小为20vp，controlSize为SMALL时，圆角大小为14vp，支持通过borderRadius属性重新设置圆角。

6.2自定义样式

 设置边框弧度：可通过borderRadius属性设置按钮的边框弧度。

 设置文本样式：通过添加文本样式设置按钮文本的展示样式。

 设置背景颜色：添加backgroundColor属性设置按钮的背景颜色。

6.3代码演示

0-10加减法

七.单选框

  Radio是单选框组件，通常用于提供相应的用户交互选择项，同一组的Radio中只有一个可以被选中。value是单选框的名称，group是单选框的所属群组名称。checked属性可以设置单选框的状态，状态分别为false和true，设置为true时表示单选框被选中，设置为false时表示单选框被选中。

7.1常用属性

 1.checked: boolean 是否默认选中，一组仅一个可设 true。

 2.width / height：设置单选框大小。

 3.onChange(callback: (value: string)=>void) 选中切换触发，参数是当前选中项的 value。

7.2代码展示

7.3关键注意事项

1.同一组所有 Radio、外层 RadioGroup 必须group 名称完全一致，否则无法互斥；

2.只能单选，多选需求改用 Checkbox 复选框；

3.value 不能重复，否则无法区分选中项；

4.布局可套 Row/Column 实现横向、纵向排列。

八.toggle

  Toggle 是状态切换组件，只有开启 / 关闭两种状态，多用于设置项开关，有三种样式：滑动开关、复选框、切换按钮。

 isOn：绑定开关布尔状态，true打开，false关闭，必须搭配@State变量

 type：指定开关样式类型

8.1 ToggleType

1. ToggleType.Switch 滑动开关（最常用，设置页）
2. ToggleType.Checkbox 勾选框（表单多选）
3. ToggleType.Button 按钮样式切换

8.2代码演示