声明式开发范式组件思维导图

这是一篇关于HCIA—HarmonyOS2.0应用开发思维导图，包含基础组件、容器组件、媒体组件等。

5.声明式开发范式组件

基础组件

Blank

空白填充组件，在容器主轴方向上，空白填充组件具有自动填充容器空余部分的能力

仅当父组件为Row/Column时生效

Button

按钮组件，可快速创建不同样式的按钮

ButtonType枚举说明

Capsule

胶囊行按钮（圆角默认为高度的一半）

Circle

圆形按钮

Normal

普通按钮（默认不带圆角）

Checkbox

提供多选框组件，通常用于某选项的打开或关闭

CheckboxGroup

多选框群组，用于控制多选框全选或者不全选状态

接口

CheckboxGroup( group?: string )

创建多选框群组，可以控制群组内的Checkbox全选或者不全选，CheckboxGroup为同一群组

DataPanel

数据面板组件，用于将多个数据占比情况使用占比图进行展示

DatePicker

选择日期的滑动选择器组件

Divider

提供分隔器组件，分隔不同内容块/内容元素

属性

vertical

boolean

使用水平分割线还是垂直分割线

false：水平分割线

true：垂直分割线

默认值：false

color

ResourceColor

分割线颜色

strokeWidth

number | string

分割线宽度

默认值：1

lineCap

lineCapStyle

分割线的端点样式

默认值：LineCapStyle.Butt

Gauge

数据量规图表组件，用于将数据展示为环形图表

Image

图片组件，支持本地图片和网络图片的渲染展示

ImageAnimator

提供帧动画组件来实现逐帧播放图片的能力，可以配置需要播放的图片列表，每张图片可以配置时长

LoadingProgress

用于显示加载动效的组件

Marquee

跑马灯组件，用于滚动展示一段单行文本，仅当文本内容宽度超过跑马灯组件宽度时滚动

Navigation

一般作为Page页面的根容器，通过属性设置来展示页面的标题、工具栏、菜单

PatternLock

图案密码锁组件，以九宫格图案的方式输入密码，用于密码验证场景

手指在PatternLock组件区域按下时开始进入输入状态，手指离开屏幕时结束输入状态完成密码输入

Progress

进度条组件，用于显示内容加载或操作处理等进度

ProgressType枚举说明

Linear

线性样式

Ring

环形无刻度样式，环形圆环逐渐显示至完全填充效果

Eclipse

圆形样式，显示类似月圆月缺的进度展示效果，从月牙逐渐变化至满月

ScaleRing

环形有刻度样式，显示类似时钟刻度形式的进度展示效果

Capsule

胶囊样式，头尾两端圆弧处的进度展示效果与Eclipse相同

中段处的进度展示效果与Linear相同

QRCode

用于显示单个二维码的组件

Radio

单选框，提供相应的用户交互选择项

Rating

提供在给定范围内选择评分的组件

RichText

富文本组件，解析并显示HTML格式文本

ScrollBar

滚动条组件ScrollBar,用于配合可滚动组件使用，如List、Grid、Scroll

Search

搜索框组件，适用于浏览器的搜索内容输入框等应用场景

Select

提供下拉选择菜单，可以让用户在多个选项之间选择

Slider

滑动条组件，通常用于快速调节设置值，如音量调节、亮度调节等应用场景

SliderStyle枚举说明

Outset

滑块在滑轨上

Inset

滑块在滑轨内

Span

作为Text组件的子组件，用于显示行内文本的组件

decoration

type: TextDecorationType,color?: ResourceColor

设置文本装饰线样式及其颜色

type: TextDecorationType.Nonecolor：Color.Black

letterSpacing

number | string

设置文本字符间距

取值小于0，字符聚集重叠，取值大于0且随着数值变大，字符间距越来越大，稀疏分布

textCase

TextCase

设置文本大小写

默认值：TextCase.Normal

Stepper、Stepperltem

Stepper

步骤导航器

仅能包含子组件Stepperltem

Stepperltem

步骤导航器元素

支持单个子组件

Text

显示一段文本的组件

content

string | Resource

文本内容。包含子组件Span时不生效，显示Span内容，并且此时text组件的样式不生效

默认值：' '

TextArea

可以输入多行文本并支持响应部分输入事件的组件

TextClock

TextClock通过文本显示当前系统时间，支持不同时区的时间显示，时间显示最高精度到秒级

Textlnput

提供单行文本输入组件

TextPicker

文本类滑动选择器组件

TextTimer

文本计时器组件，支持自定义时间格式

TimePicker

选择时间的滑动选择器组件

Toogle

组件提供勾选框样式、状态按钮样式及开关样式

容器组件

Alphabetlndexer

字母索引条

Badge

可以附加在单个组件上用于信息标记的容器组件

Column

参数

space

沿垂直方向布局的容器

alignltems

设置子组件在水平方向上的对齐格式

justifyContent

设置子组件在垂直方向上的对齐格式

ColumnSplit

将子组件纵向布局，并在每个子组件之间插入一根横向的分割线

Counter

计数器组件，提供相应的增加或者减少的计数操作

Flex

Flex存在两根轴：默认水平的主轴（main axis）和垂直交叉轴（cross axis）

主轴的开始位置（与边框的交叉位置）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end

属性

FlexDirection

子组件在Flex容器上排列方向，即主轴的方向，默认值Row

Row

主轴与行方向一致作为布局模式

RowReverse

与Row方向相反进行布局

Column

主轴与列方向一致作为布局模式

ColumnReverse

与Column相反方向进行布局

justifyContent

子组件在Flex容器主轴上的对齐格式

Start

左对齐

Center

居中

End

右对齐

SpaceBetween

两端对齐，组件之间的间隔都相等

SpaceAround

第一个元素到行首的距离和最后一个元素到行尾的距离时相邻元素之间距离的一半

SpaceEvently

两端，组件之间的间隔都相等

alignltems

子组件在Flex容器交叉轴上的对齐格式

Auto

使用Flex容器中默认配置

Start

交叉轴的起点对齐

Center

交叉轴的中点对齐

End

交叉轴的终点对齐

Stretch

元素在Flex容器中，交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸

Baseline

元素在Flex容器中，交叉轴方向文本基线对齐

GridContainer

纵向排布栅格布局容器，仅在栅格布局场景中使用

GridCol和GridRow

GridCol

栅格子组件，必须作为栅格容器组件（GridRow）的子组件使用

GridRow

栅格容器组件，仅可以和栅格子组件（GridCol）在栅格布局场景中使用

Grid和Gridltem

网格容器，由“行”和“列”分割的单元格所组成，通过指定“项目”所在的单元格做出各种各样的布局，包含Gridltem子组件

Gridltem

网格容器中单项内容容器

List与Listltem

List

列表包含一系列相同宽度的列表项。适合连续、多行呈现同类数据，例如图片和文本

Listltem

用来展示列表具体item，宽度默认充满List组件，必须配合List来使用

Navigator

路由容器组件，提供路由跳转能力

Panel

可滑动面板，提供一种轻量的内容展示窗口，方便在不同尺寸中切换

Refresh

可以进行页面下拉操作并显示刷新动效的容器组件

RelativeContainer

相对布局组件，用于复杂场景中元素对齐的布局

Row

沿水平方向布局容器

Space

横向布局元素间距

Top

在垂直方向上子组件的对齐格式，顶部对齐

Center

在垂直方向上子组件的对齐格式居中对齐，默认对齐方式

End

元素在主轴方向尾部对齐，最后一个元素与行尾对齐，其他元素与后一个对齐

Center

元素在主轴方向中心对齐，第一个元素与行首的距离与最后一个元素与行尾距离相同

RowSplit

将子组件横向布局，并在每个子组件之间插入一根纵向的分割线

Scroll

可滑动的容器组件，当子组件的布局尺寸超过父组件的视口时，内容可以滑动

SideBarContainer

提供侧边栏可以显示和隐藏的侧边栏容器，通过子组件定义侧边栏和内容区，第一个子组件表示侧边栏，第二个子组件表示内容区

Stack

堆叠容器，子组件按照顺序依次入栈，后一个子组件覆盖前一个子组件

Swiper

滑块视图容器，提供子组件滑动轮播显示的能力

Tabs和TabContent

Tabs

通过页签进行内容视图切换的容器组件，每个页签对应一个内容视图

TabContent

仅在Tabs中使用，对应一个切换页签的内容视图

警告弹窗

显示警告弹窗组件，可设置文本内容与响应回调

列表选择弹窗

列表弹窗

自定义弹窗

通过CustomDialogController类显示自定义弹窗

使用弹窗组件时，可优先考虑自定义弹窗，便于自定义弹窗的样式与内容

各类滑动选择器弹窗

日期滑动选择器弹窗

时间滑动选择器弹窗

文本滑动选择器弹窗

媒体组件

Video

视频播放组件。使用网络视频时，需要申请权限ohos.permission.INTERNET