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