• Home
Name Date Size #Lines LOC

..--

AppScope/12-May-2024-3734

entry/12-May-2024-52,36449,991

hvigor/12-May-2024-4,7124,428

screenshots/devices/12-May-2024-

.gitignoreD12-May-2024111 88

README_zh.mdD12-May-202428.3 KiB522478

build-profile.json5D12-May-20241.1 KiB4342

hvigorfile.jsD12-May-2024168 21

hvigorwD12-May-20242.1 KiB6428

hvigorw.batD12-May-20242 KiB7356

oh-package.json5D12-May-2024216 1211

ohosTest.mdD12-May-202436.2 KiB141138

README_zh.md

1# 组件集合
2
3### 介绍
4
5本示例为ArkUI中组件、通用、动画、全局方法的集合。
6
7### 效果预览
8
9| 绑定                                          | 通用                                               | 动画                                                            | 全局方法                                               |
10|---------------------------------------------|--------------------------------------------------|---------------------------------------------------------------|----------------------------------------------------|
11| ![image](screenshots/devices/component.png) | ![image](screenshots/devices/general.png)        | ![image](screenshots/devices/animation.png)                   | ![image](screenshots/devices/global.png)           |
12| <center>Button 按钮</center>                  | <center>onClick 点击事件</center>                    | <center>元素共享转场</center>                                       | <center>警告弹窗</center>                              |
13| ![image](screenshots/devices/button_zh.png) | ![image](screenshots/devices/click_event_zh.png) | ![image](screenshots/devices/share_element_transition_zh.png) | ![image](screenshots/devices/warning_popup_zh.png) |
14
15使用说明：
16
171.点击**组件**、**通用**、**动画**、**全局方法**四个按钮或左右滑动切换不同视图。
18
192.点击二级导航（如通用属性、通用事件等），若存在三级导航则展开三级导航（如Border 边框、点击事件等）；若不存在三级导航，则跳转至详情页面。
20
213.若存在三级导航（如Border 边框、点击事件等），点击跳转至详情页面。
22
23### 工程目录
24
25```
26entry/src/main/ets/
27|---component
28|   |---AttributeModificationTool.ets                    // 组件
29|   |---IntroductionTitle.ets                            // 首页介绍标题组件
30|   |---TabContentNavigation.ets                         // 切换组件
31|   |---TitleBar.ets                                     // 详情页面标题组件
32|---Application
33|   |---MyAbilityStage.ts
34|---data
35|   |---CollectionCategory.ts                            // 数据分类
36|   |---ResourceDataHandle.ts                            // 源数据
37|---MainAbility
38|   |---MainAbility.ts
39|---model
40|   |---CategoricalDataType.ts                           // 数据类型
41|---util
42|   |---Logger.ts                                        // 打印
43|   |---ShowToast.ets                                    // 弹窗
44|---pages
45|   |---Index.ets                                        // 首页
46|   |---animations                                       // 动画
47|   |   |---AnimationData.ets
48|   |   |---animateToSample
49|   |   |   |---AnimateToSample.ets
50|   |   |---animationSample
51|   |   |   |---AnimationSample.ets
52|   |   |---interpolationCalculationSample
53|   |   |   |---InterpolationCalculationSample.ets       // 插值计算
54|   |   |---motionPathSample
55|   |   |   |---MotionPathSample.ets                     // 路径动画
56|   |   |---TransitionAnimations                         // 转场动画
57|   |   |   |---componentTransitionSample                // 组件内转场
58|   |   |   |   |---ComponentTransitionSample.ets
59|   |   |   |---floatingSample                           // 悬浮窗
60|   |   |   |   |---FloatingWindowComponent.ets
61|   |   |   |   |---FloatingWindowSample.ets
62|   |   |   |---folderSample                             // 文件夹展开
63|   |   |   |   |---Folder.ets
64|   |   |   |   |---FolderItem.ets
65|   |   |   |   |---FolderSample.ets
66|   |   |   |---gallerySample                            // 图库卡片展开
67|   |   |   |   |---GalleryCardSample.ets
68|   |   |   |---layoutAnimationSample                    // 布局动效
69|   |   |   |   |---LayoutAnimationSample.ets
70|   |   |   |---multiplexSample                          // 多任务
71|   |   |   |   |---MultiplexModel.ets
72|   |   |   |   |---MultiplexSample.ets
73|   |   |   |   |---ScrollItem.ets
74|   |   |   |---pageTransitionSample                     // 页面间转场
75|   |   |   |   |---PageTransitionSample.ets
76|   |   |   |   |---PageTransitionSampleTo.ets
77|   |   |   |---shareElementTransitionSample             // 共享元素转场
78|   |   |   |   |---ShareElementTransitionSample.ets
79|   |   |   |   |---ShareElementTransitionSampleTo.ets
80|   |   |   |---shopSample                               // 商店卡片展开
81|   |   |   |   |---ShopCardSample.ets
82|   |   |   |---sideBarTransitionSample                  // 侧边栏动效
83|   |   |   |   |---ChangePanel.ets
84|   |   |   |   |---SideBarTransitionSample.ets
85|   |   |   |---sizeTransitionSample                     // 尺寸变换动效
86|   |   |   |   |---SizeTransitionSample.ets
87|   |   |   |---systemIcon                               // 系统图标
88|   |   |   |   |---SystemIcon.ets
89|   |---components
90|   |   |---ComponentData.ets
91|   |   |---auxiliary                                    // 辅助
92|   |   |   |---alphabetIndexerSample
93|   |   |   |   |---AlphabetIndexerSample.ets            // 字母索引条
94|   |   |   |---badgeSample
95|   |   |   |   |---BadgeSample.ets                      // 标记
96|   |   |   |---panelSample
97|   |   |   |   |---PanelSample.ets                      // 弹出面板
98|   |   |   |---refreshSample
99|   |   |   |   |---RefreshSample.ets                    // 下拉刷新
100|   |   |   |---scrollbarSample
101|   |   |   |   |---ScrollBarSample.ets                  // 滚动条
102|   |   |---blankAndDivider                              // 空白与分分隔
103|   |   |   |---dividerSample
104|   |   |   |   |---ChangePanel.ets
105|   |   |   |   |---DividerSample.ets
106|   |   |---buttonAndSelection                           // 按钮与选择
107|   |   |   |---buttonSample
108|   |   |   |   |---ButtonSample.ets                     // 按钮
109|   |   |   |---checkboxSample
110|   |   |   |   |---CheckboxSample.ets                   // 勾选框
111|   |   |   |---counterSample
112|   |   |   |   |---CounterSample.ets                    // 计数器
113|   |   |   |---datePickerSample
114|   |   |   |   |---DatePickerSample.ets                 // 日期选择器
115|   |   |   |---radioSample
116|   |   |   |   |---RadioSample.ets                      // 单选按钮
117|   |   |   |---ratingSample
118|   |   |   |   |---RatingSample.ets                     // 评分条
119|   |   |   |---selectSample
120|   |   |   |   |---SelectSample.ets                     // 选择菜单
121|   |   |   |---sliderSample
122|   |   |   |   |---ChangePanel.ets
123|   |   |   |   |---SliderSample.ets                     // 滑动条
124|   |   |   |---textPickerSample
125|   |   |   |   |---TextPickerSample.ets                 // 文本选择器
126|   |   |   |---timePickerSample
127|   |   |   |   |---TimePickerSample.ets                 // 时间选择器
128|   |   |   |---toggleSample
129|   |   |   |   |---ToggleSample.ets                     // 切换按钮
130|   |   |---canvasAndGraphicDrawing                      // 画布与图形绘制
131|   |   |   |---canvasSample
132|   |   |   |   |---CanvasSample.ets                     // 画布
133|   |   |   |---circleSample
134|   |   |   |   |---ChangePanel.ets
135|   |   |   |   |---CircleSample.ets                     // 圆形
136|   |   |   |---ellipseSample
137|   |   |   |   |---ChangePanel.ets
138|   |   |   |   |---EllipseSample.ets					 // 椭圆
139|   |   |   |---lineSample
140|   |   |   |   |---ChangePanel.ets
141|   |   |   |   |---LineSample.ets                       // 直线
142|   |   |   |---pathSample
143|   |   |   |   |---ChangePanel.ets
144|   |   |   |   |---PathSample.ets                       // 路径
145|   |   |   |---polygonSample
146|   |   |   |   |---ChangePanel.ets
147|   |   |   |   |---PolygonSample.ets                    // 多边形
148|   |   |   |---polylineSample
149|   |   |   |   |---ChangePanel.ets
150|   |   |   |   |---PolylineSample.ets                   // 折线
151|   |   |   |---rectSample
152|   |   |   |   |---ChangePanel.ets
153|   |   |   |   |---RectSample.ets                       // 矩形
154|   |   |   |---shapeSample
155|   |   |   |   |---ShapeSample.ets                      // 指定图形
156|   |   |---imageVideoAndMedia
157|   |   |   |---imageAnimatorSample
158|   |   |   |   |---ImageAnimatorSample.ets              // 逐帧播放图片
159|   |   |   |---imageSample
160|   |   |   |   |---ImageControlPanel.ets
161|   |   |   |   |---ImageSample.ets                      // 图片
162|   |   |   |---pluginComponentSample
163|   |   |   |   |---PluginComponentSample.ets			 // 嵌入式显示
164|   |   |   |---videoSample
165|   |   |   |   |---VideoControlPanel.ets
166|   |   |   |   |---VideoSample.ets                      // 视频
167|   |   |   |---xcomponentSample
168|   |   |   |   |---XComponentSample.ets                 // 绘制组件
169|   |   |---canvas
170|   |   |   |---attributesSample
171|   |   |   |   |---AttributesSample.ets                 // 属性
172|   |   |   |---gradientSample
173|   |   |   |   |---GradientSample.ets                   // 渐变对象
174|   |   |   |---image_bitmapSample
175|   |   |   |   |---Image_bitmapSample.ets               // 位图对象
176|   |   |   |---methodsSample
177|   |   |   |   |---MethodsSample.ets                    // 方法
178|   |   |   |---path2dSample
179|   |   |   |   |---Path2dSample.ets                     // 路径对象
180|   |   |   |---shadowsSample
181|   |   |   |   |---ShadowsSample.ets                    // 阴影
182|   |   |   |---transformSample
183|   |   |   |   |---TransformSample.ets                  // 转换
184|   |   |---informationPresentationAndDynamicEffects
185|   |   |   |---dataPanelSample
186|   |   |   |   |---DataPanelSample.ets                  // 数据面板
187|   |   |   |---gaugeSample
188|   |   |   |   |---GaugeSample.ets                      // 仪表盘
189|   |   |   |---imageFitFullSample
190|   |   |   |   |---ImageFitFullSample.ets               // 动效
191|   |   |   |---loadingProgressSample
192|   |   |   |   |---LoadingProgressSample.ets
193|   |   |   |---listSample                               // 列表
194|   |   |   |   |---ListSample.ets
195|   |   |   |---marqueeSample
196|   |   |   |   |---MarqueeSample.ets                    // 跑马灯
197|   |   |   |---particleSample
198|   |   |   |   |---ParticleSample.ets                   // 粒子效果
199|   |   |   |---progressSample
200|   |   |   |   |---ProgressSample.ets                   // 进度条
201|   |   |   |---qrCodeSample
202|   |   |   |   |---QRCodeSample.ets                     // 二维码
203|   |   |   |---scrollToSample
204|   |   |   |   |---ScrollToSample.ets                   // 动效
205|   |   |   |---tapsSwitchSample
206|   |   |   |   |---TapsSwitchSample.ets                 // 模糊切换
207|   |   |   |---textclockSample
208|   |   |   |   |---TextClockSample.ets                  // 文字时钟
209|   |   |   |---textTimerSample
210|   |   |   |   |---TextTimerSample.ets                  // 文字计时器
211|   |   |---listAndGrid
212|   |   |   |---gridItemSample
213|   |   |   |   |---GridItemControlPanel.ets
214|   |   |   |   |---GridItemSample.ets                   // 网格容器子组件
215|   |   |   |---gridSample
216|   |   |   |   |---GridControlPanel.ets
217|   |   |   |   |---GridSample.ets                       // 网格容器
218|   |   |   |---listItemSample
219|   |   |   |   |---ListItemSample.ets                   // 列表容器子组件
220|   |   |   |---listSample
221|   |   |   |   |---ListControlPanel.ets
222|   |   |   |   |---ListSample.ets                       // 列表容器
223|   |   |---navigation
224|   |   |   |---navigatorSample
225|   |   |   |   |---NavigatorSample.ets                  // 路由
226|   |   |   |   |---NavigatorSecondPage.ets
227|   |   |   |   |---NavigatorThirdPage.ets
228|   |   |   |---navigationSample
229|   |   |   |   |---NavigationSample.ets                 // 导航根容器
230|   |   |   |---navRouterSample
231|   |   |   |   |---NavRouterSample.ets                  // 导航
232|   |   |   |---stepperAndStepperItemSample
233|   |   |   |   |---StepperAndStepperItemSample.ets      // 步骤导航器
234|   |   |   |---tabContentSample
235|   |   |   |   |---TabContentSample.ets                 // 页签子组件
236|   |   |   |---tabSample
237|   |   |   |   |---TabControlPanel.ets
238|   |   |   |   |---TabSample.ets                        // 页签
239|   |   |---rowsAndColumns
240|   |   |   |---columnSample
241|   |   |   |   |---ColumnControlPanel.ets
242|   |   |   |   |---ColumnSample.ets                     // 列容器
243|   |   |   |---columnSplitSample
244|   |   |   |   |---ColumnSplitSample.ets                // 列分割容器
245|   |   |   |---rowSample
246|   |   |   |   |---RowControlPanel.ets
247|   |   |   |   |---RowSample.ets                        // 行容器
248|   |   |   |---rowSplitSample
249|   |   |   |   |---RowSplitSample.ets                   // 行分割容器
250|   |   |   |---sideBarContainerSample
251|   |   |   |   |---SideBarContainerControlPanel.ets
252|   |   |   |   |---SideBarContainerSample.ets           // 侧边栏
253|   |   |---scrollAndSwipe
254|   |   |   |---scrollSample
255|   |   |   |   |---ScrollSample.ets                     // 滚动
256|   |   |   |---swiperSample
257|   |   |   |   |---SwiperControlPanel.ets
258|   |   |   |   |---SwiperSample.ets                     // 轮播
259|   |   |---stackFlexAndGrid
260|   |   |   |---flexSample
261|   |   |   |   |---FlexControlPanel.ets
262|   |   |   |   |---FlexSample.ets                       // 弹性布局
263|   |   |   |---gridContainerSample
264|   |   |   |   |---GridContainerControlPanel.ets
265|   |   |   |   |---GridContainerSample.ets              // 栅格系统
266|   |   |   |---stackSample
267|   |   |   |   |---StackControlPanel.ets
268|   |   |   |   |---StackSample.ets                      // 层叠布局
269|   |   |---textAndInput
270|   |   |   |---patternLockSample
271|   |   |   |   |---ChangePanel.ets
272|   |   |   |   |---PattternLockSample.ets               // 密码锁
273|   |   |   |---searchSample
274|   |   |   |   |---ChangePanel.ets
275|   |   |   |   |---SearchSample.ets                     // 搜索栏
276|   |   |   |---imageSpanSample
277|   |   |   |   |---ChangePanel.ets
278|   |   |   |   |---imageSpanSample.ets                  // 行内图像
279|   |   |   |---textAreaSample
280|   |   |   |   |---ChangePanel.ets
281|   |   |   |   |---TextAreaSample.ets                   // 文本域
282|   |   |   |---richTextSample
283|   |   |   |   |---RichTextSample.ets                   // 富文本
284|   |   |   |---spanSample
285|   |   |   |   |---ChangePanel.ets
286|   |   |   |   |---SpanSample.ets                       // 行内文本
287|   |   |   |---textInputSample
288|   |   |   |   |---TextInputSample.ets                  // 文本输入
289|   |   |   |---textSample
290|   |   |   |   |---ChangePanel.ets
291|   |   |   |   |---TextSample.ets                       // 文本
292|   |   |---web
293|   |   |   |---webSample
294|   |   |   |   |---WebSample.ets                        // 网页
295|   |---globalMethods                                    // 详情页面
296|   |   |---GlobalMethodData.ets
297|   |   |---dialogs
298|   |   |   |---alertDialogSample
299|   |   |   |   |---AlertDialogSample.ets                // 警告弹窗
300|   |   |   |---customDialogSample
301|   |   |   |   |---CustomDialog.ets
302|   |   |   |   |---CustomDialogSample.ets               // 自定义弹窗
303|   |   |   |---dateDialogSample
304|   |   |   |   |---DateDialogSample.ets                 // 日期选择弹窗
305|   |   |   |---timeDialogSample
306|   |   |   |   |---TimeDialogSample.ets                 // 时间选择弹窗
307|   |   |   |---actionSheetDialogSample
308|   |   |   |   |---ActionSheetDialogSample.ets          // 列表选择弹窗
309|   |   |   |---textPickerDialogSample
310|   |   |   |   |---TextPickerDialogSample.ets           // 文本滑动选择器弹窗
311|   |   |   |---menuSample
312|   |   |   |   |---MenuSample.ets                       // 菜单
313|   |---universal                                        // 详情页面
314|   |   |---UniversialData.ets
315|   |   |---events
316|   |   |   |---areaChangeEventSample
317|   |   |   |   |---AreaChangeEventSample.ets            // 组件区域变化事件
318|   |   |   |---clickEventSample
319|   |   |   |   |---ClickEventSample.ets                 // 点击事件
320|   |   |   |---dragEventSample
321|   |   |   |   |---component                            // 组件拖拽
322|   |   |   |   |   |---FormComponentDrag.ets
323|   |   |   |   |   |---GridItemDrag.ets
324|   |   |   |   |   |---HyperlinkDrag.ets
325|   |   |   |   |   |---ImageDrag.ets
326|   |   |   |   |   |---ListItemDrag.ets
327|   |   |   |   |   |---TextDrag.ets
328|   |   |   |   |   |---VideoDrag.ets
329|   |   |   |   |---DragEventSample.ets                  // 拖拽事件
330|   |   |   |---focusEventSample
331|   |   |   |   |---FocusEventSample.ets                 // 焦点事件
332|   |   |   |---keyPressEventSample
333|   |   |   |   |---KeyPressEventSample.ets              // 按压事件
334|   |   |   |---mountUnmountEventSample
335|   |   |   |   |---MountUnmountEventSample.ets          // 挂载卸载事件
336|   |   |   |---mouseEventSample
337|   |   |   |   |---MouseEventSample.ets                 // 鼠标事件
338|   |   |   |---scrollEventSample
339|   |   |   |   |---ScrollEventSample.ets                // 滚动事件
340|   |   |   |---touchEventSample
341|   |   |   |   |---TouchEventSample.ets                 // 触摸事件
342|   |   |---gesture
343|   |   |   |---bindGestureSample
344|   |   |   |   |---BindGestureSample.ets                // 绑定手势方法
345|   |   |   |---combinedSample
346|   |   |   |   |---CombinedSample.ets                   // 组合手势
347|   |   |   |---longPressSample
348|   |   |   |   |---LongPressSample.ets                  // 长按手势
349|   |   |   |---panSample
350|   |   |   |   |---PanSample.ets                        // 拖动手势
351|   |   |   |---pinchSample
352|   |   |   |   |---PinchSample.ets                      // 捏合手势
353|   |   |   |---rotationSample
354|   |   |   |   |---RotationSample.ets                   // 旋转手势
355|   |   |   |---swipeSample
356|   |   |   |   |---SwipeSample.ets                      // 滑动手势
357|   |   |   |---tapGestureSample
358|   |   |   |   |---TapGestureSample.ets                 // Tap手势
359|   |   |---properties
360|   |   |   |---foregroundSample
361|   |   |   |   |---ForegroundSample.ets                 // 前景
362|   |   |   |---backgroundSample
363|   |   |   |   |---BackgroundSample.ets                 // 背景
364|   |   |   |---borderSample
365|   |   |   |   |---BorderSample.ets                     // 边框
366|   |   |   |---componentBlurredSample
367|   |   |   |   |---ComponentBlurredSample.ets           // 分布式迁移标识
368|   |   |   |---componentIDSample
369|   |   |   |   |---ComponentIDSample.ets                // 组件标识
370|   |   |   |---displaySample
371|   |   |   |   |---DisplaySample.ets                    // 显示
372|   |   |   |---effectsSample
373|   |   |   |   |---EffectsSample.ets                    // 互动
374|   |   |   |---flexSample
375|   |   |   |   |---FlexSample.ets                       // flex布局
376|   |   |   |---focusControlSample
377|   |   |   |   |---FocusControlSample.ets               // 焦点控制
378|   |   |   |---fontSample
379|   |   |   |   |---FontSample.ets                       // 字体
380|   |   |   |---gridSettingsSample
381|   |   |   |   |---GridSettingsSample.ets               // 栅格设置
382|   |   |   |---interactionSample
383|   |   |   |   |---InteractionSample.ets                // 图像效果
384|   |   |   |---layoutConstraintSample
385|   |   |   |   |---LayoutConstraintSample.ets           // 布局约束
386|   |   |   |---locationSample
387|   |   |   |   |---LocationSample.ets                   // 位置设置
388|   |   |   |---pictureBorderSample
389|   |   |   |   |---PictureBorderSample.ets              // 图片边框设置
390|   |   |   |---restoreIdSample
391|   |   |   |   |---RestoreIdSample.ets                  // 分布式迁移标识
392|   |   |   |---rotateSample
393|   |   |   |   |---RotateSample.ets                     // 旋转
394|   |   |   |---scaleSample
395|   |   |   |   |---ScaleSample.ets                      // 缩放
396|   |   |   |---shapeCropSample
397|   |   |   |   |---ShapeCropSample.ets                  // 形状裁剪
398|   |   |   |---safeAreaSample
399|   |   |   |   |---SafeAreaSample.ets                   // 安全区域
400|   |   |   |---sizeSample
401|   |   |   |   |---SizeSample.ets                       // 尺寸
402|   |   |   |---transformSample
403|   |   |   |   |---TransformSample.ets                  // 变换矩阵
404|   |   |   |---translateSample
405|   |   |   |   |---TranslateSample.ets                  // 图像变换
406```
407
408### 具体实现
409
410本示例使用 [Tabs容器组件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-tabs.md)
411搭建整体应用框架，每个 [TabContent内容视图](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-tabcontent.md)
412使用 [List容器组件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-list.md)
413布局，在每个 [ListItem](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-listitem.md)
414中使用 [循环渲染](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/quick-start/arkts-rendering-control-foreach.md)
415加载此分类下分类导航数据，底部导航菜单使用 [TabContent中tabBar属性](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-container-tabcontent.md#tabbar)
416设置自定义样式 。
417
418* 将组件库分成四大类，切换查看
419
420    * 组件模块：
421        * 空白与分隔
422            * 封装自定义组件：CommonItemSlider，CommonItemSelect，CommonItemColorSelect
423            * 接口参考：[@ohos.app.ability.common](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-ability-kit/js-apis-app-ability-common.md)
424
425        * 按钮与选择
426            * 使用全局组件ShowToast,TitleBar,IntroductionTitle实现按钮，时间选择器，单选按钮，选择菜单，滑动条，切换按钮，勾选框，文本选择器，时间选择器，计数器，评分条组件功能
427            * 使用getStringArrayData，getStringData获取数据[ResourceDataHandle.ets](entry/src/main/ets/data/ResourceDataHandle.ets)
428
429        * 滚动与滑动
430            * 使用全局组件TitleBar实现滚动，翻页组件功能
431
432        * 信息展示与功效
433            * 使用全局组件TitleBar，AttributeModificationTool实现二维码，进度条，跑马灯，文字计时器，文字时钟，仪表盘，数据面板组件功能
434            * 使用getStringArrayData，getStringData获取数据[ResourceDataHandle.ets](entry/src/main/ets/data/ResourceDataHandle.ets)
435
436        * 文本与输入
437            * 使用全局组件ShowToast，TitleBar，AttributeModificationTool,IntroductionTitle实现行内文本，行内图像，文本输入，文本，富文本组件功能
438            * 使用getStringArrayData，getStringData获取数据[ResourceDataHandle.ets](entry/src/main/ets/data/ResourceDataHandle.ets)
439
440        * 辅助
441            * 使用全局组件TitleBar实现标记，滚动条，下拉刷新，弹出面板，字母索引条组件功能
442            * 使用getStringArrayData，getStringData获取数据[ResourceDataHandle.ets](entry/src/main/ets/data/ResourceDataHandle.ets)
443
444        * 画布
445            * 使用全局组件TitleBar, CanvasGradient, CanvasPattern, ImageBitmap, Path2D等实现图形绘制属性，图形绘制方法，渐变对象绘制，路径对象绘制，位图的绘制，阴影绘制，变换绘制
446            * 使用getStringArrayData，getStringData获取数据[ResourceDataHandle.ets](entry/src/main/ets/data/ResourceDataHandle.ets)
447
448    * 通用模块：
449        * 通用事件
450            * 用到全局组件TitleBar，IntroductionTitle实现页面
451            * resetBallMotion，isSideReached，calculateReachedSide，decideMoveDirection方法计算区域坐标，moveBall方法移动球体
452
453        * 通用属性
454            * 使用全局组件TitleBar，AttributeModificationTool实现组件页面
455            * 接口参考：[@ohos.promptAction](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-promptAction.md)
456
457    * 动画模块：
458        * 转场动画
459            * 用到全局组件TitleBar，IntroductionTitle实现页面
460            * 接口参考：[@ohos.promptAction](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-promptAction.md)
461
462        * 插值计算
463            * 用到全局组件TitleBar，IntroductionTitle实现页面
464            * 接口参考：[@ohos.curves](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-curve.md)， [@ohos.router](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/js-apis-router.md)
465        * 显示动画
466          * 用到全局组件TitleBar，IntroductionTitle实现页面
467          * 接口参考：[animateTo](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-explicit-animation.md)
468
469        * 属性动画
470            * 用到全局组件TitleBar，IntroductionTitle实现页面
471            * 接口参考：[animation](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-animatorproperty.md)
472
473        * 路径动画
474            * 用到全局组件TitleBar，IntroductionTitle实现页面
475            * 接口参考：[path](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-motion-path-animation.md)
476
477    * 全局方法模块：
478        * 弹窗
479            * 使用全局组件ShowToast，TitleBar，IntroductionTitle实现弹窗组件页面
480            * 使用getStringArrayData，getStringData获取数据[ResourceDataHandle.ets](entry/src/main/ets/data/ResourceDataHandle.ets)
481
482### 相关权限
483
484[ohos.permission.GET_BUNDLE_INFO](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/permissions-for-all.md#ohospermissionget_bundle_info)
485
486[ohos.permission.GET_BUNDLE_INFO_PRIVILEGED](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/permissions-for-system-apps.md#ohospermissionget_bundle_info_privileged)
487
488[ohos.permission.REQUIRE_FORM](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/permissions-for-system-apps.md#ohospermissionrequire_form)
489
490### 依赖
491
492不涉及。
493
494### 约束与限制
495
4961.本示例仅支持标准系统上运行，支持设备：RK3568。
497
4982.本示例仅支持API10版本SDK，SDK版本号(API Version 10 Release),镜像版本号(4.0Release)
499
5003.本示例涉及使用系统接口，FormComponent组件相关接口，需要手动替换Full
501SDK才能编译通过，具体操作可参考[替换指南](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/faqs/full-sdk-switch-guide.md)。
502
5034.本示例需要使用DevEco Studio 版本号(4.0Release)及以上版本才可编译运行。
504
5055.本示例涉及ohos.permission.GET_BUNDLE_INFO_PRIVILEGED、ohos.permission.REQUIRE_FORM为system_basic级别（相关权限级别可通过[权限定义列表](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/permissions-for-all.md#ohospermissionget_bundle_info)
506查看），需要配置高权限签名，可参考[应用apl等级说明](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/AccessToken/app-permission-mgmt-overview.md#%E5%BA%94%E7%94%A8apl%E7%AD%89%E7%BA%A7)。
507
5086.本示例涉及系统接口，需要配置系统应用签名，可以参考[修改harmonyappprovision配置文件](https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/security/app-provision-structure.md#%E4%BF%AE%E6%94%B9harmonyappprovision%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6)
509，把配置文件中的“app-feature”字段信息改为“hos_system_app”。
510
511### 下载
512
513如需单独下载本工程，执行如下命令：
514
515```
516git init
517git config core.sparsecheckout true
518echo code/UI/ArkTsComponentCollection/ComponentCollection/ > .git/info/sparse-checkout
519git remote add origin https://gitee.com/openharmony/applications_app_samples.git
520git pull origin master
521
522```