[HarmonyOS Next示例代码] 鸿蒙--基础组件使用

xiaohai_09

已于 2024-08-16 09:55:08 修改

阅读量630

点赞数 10

文章标签： harmonyos 鸿蒙

于 2024-08-16 09:44:26 首次发布

本文链接：https://blog.csdn.net/qq_23068089/article/details/141249548

版权

组件集合

介绍

本示例为ArkUI中组件、通用、动画、全局方法的集合。

效果预览

使用说明：

1.点击组件、通用、动画、全局方法四个按钮或左右滑动切换不同视图。

2.点击导航（如onClick点击事件、触摸事件等），跳转至详情页面。

工程目录

├──entry/src/main/ets                                  // 代码区
│  ├──application
│  │  └──MyAbilityStage.ets      
│  ├──common
│  │  ├──AttributeModificationTool.ets                 // 组件
│  │  ├──IntroductionTitle.ets                         // 首页介绍标题组件
│  │  ├──TabContentNavigation.ets                      // 切换组件
│  │  └──TitleBar.ets                                  // 详情页面标题组件
│  ├──data
│  │  ├──CollectionCategory.ets                        // 数据分类
│  │  └──ResourceDataHandle.ets                        // 源数据
│  ├──entryability
│  │  └──EntryAbility.ets              
│  ├──model
│  │  └──CategoricalDataType.ets                       // 数据类型                   
│  ├──pages
│  │  ├──animations                                    // 动画
│  │  │  ├──animateToSample    
│  │  │  │  └──AnimateToSample.ets 
│  │  │  ├──animationSample    
│  │  │  │  └──AnimationSample.ets 
│  │  │  ├──interpolationCalculationSample    
│  │  │  │  └──InterpolationCalculationSample.ets      // 插值计算
│  │  │  ├──motionPathSample    
│  │  │  │  └──MotionPathSample.ets                    // 路径动画
│  │  │  ├──TransitionAnimations                       // 转场动画
│  │  │  │  ├──componentTransitionSample               // 组件内转场
│  │  │  │  │  └──ComponentTransitionSample.ets        
│  │  │  │  ├──floatingSample                          // 悬浮窗
│  │  │  │  │  ├──FloatingWindowComponent.ets          
│  │  │  │  │  └──FloatingWindowSample.ets                 
│  │  │  │  ├──folderSample                            // 文件夹展开
│  │  │  │  │  ├──Folder.ets                         
│  │  │  │  │  ├──FolderItem.ets                         
│  │  │  │  │  └──FolderSample.ets                         
│  │  │  │  ├──gallerySample                           // 图库卡片展开
│  │  │  │  │  └──GalleryCardSample.ets                    
│  │  │  │  ├──layoutAnimationSample                   // 布局动效
│  │  │  │  │  └──LayoutAnimationSample.ets                
│  │  │  │  ├──multiplexSample                         // 多任务
│  │  │  │  │  ├──MultiplexModel.ets                      
│  │  │  │  │  ├──MultiplexSample.ets                      
│  │  │  │  │  └──ScrollItem.ets                       
│  │  │  │  ├──pageTransitionSample                    // 页面间转场
│  │  │  │  │  ├──PageTransitionSample.ets                      
│  │  │  │  │  └──PageTransitionSampleTo.ets                      
│  │  │  │  ├──shareElementTransitionSample            // 共享元素转场
│  │  │  │  │  ├──ShareElementTransitionSample.ets                     
│  │  │  │  │  └──ShareElementTransitionSampleTo.ets                     
│  │  │  │  ├──shopSample                              // 商店卡片展开
│  │  │  │  │  └──ShopCardSample.ets                      
│  │  │  │  ├──sideBarTransitionSample                 // 侧边栏动效
│  │  │  │  │  ├──ChangePanel.ets               
│  │  │  │  │  └──SideBarTransitionSample.ets              
│  │  │  │  ├──sizeTransitionSample                    // 尺寸变换动效
│  │  │  │  │  └──SizeTransitionSample.ets                 
│  │  │  │  ├──systemIcon                              // 系统图标
│  │  │  │  │  └──SystemIcon.ets         
│  │  │  │  └──AnimationData.ets                  
│  │  ├──components                                       
│  │  │  ├──auxiliary                                  // 辅助
│  │  │  │  ├──alphabetIndexerSample
│  │  │  │  │  └──AlphabetIndexerSample.ets            // 字母索引条
│  │  │  │  ├──badgeSample
│  │  │  │  │  └──BadgeSample.ets                      // 标记
│  │  │  │  ├──refreshSample
│  │  │  │  │  └──RefreshSample.ets                    // 下拉刷新
│  │  │  │  ├──scrollbarSample 
│  │  │  │  │  └──ScrollBarSample.ets                  // 滚动条
│  │  │  ├──blankAndDivider                            // 空白与分分隔
│  │  │  │  └──dividerSample
│  │  │  │     ├──ChangePanel.ets
│  │  │  │     └──DividerSample.ets
│  │  │  ├──buttonAndSelection                         // 按钮与选择
│  │  │  │  ├──buttonSample
│  │  │  │  │  └──ButtonSample.ets                     // 按钮
│  │  │  │  ├──checkboxSample
│  │  │  │  │  └──CheckboxSample.ets                   // 勾选框
│  │  │  │  ├──counterSample
│  │  │  │  │  └──CounterSample.ets                    // 计数器
│  │  │  │  ├──datePickerSample
│  │  │  │  │  └──DatePickerSample.ets                 // 日期选择器
│  │  │  │  ├──radioSample
│  │  │  │  │  └──RadioSample.ets                      // 单选按钮
│  │  │  │  ├──ratingSample
│  │  │  │  │  └──RatingSample.ets                     // 评分条
│  │  │  │  ├──selectSample
│  │  │  │  │  └──SelectSample.ets                     // 选择菜单
│  │  │  │  ├──sliderSample
│  │  │  │  │  ├──ChangePanel.ets
│  │  │  │  │  └──SliderSample.ets                     // 滑动条
│  │  │  │  ├──textPickerSample 
│  │  │  │  │  └──TextPickerSample.ets                 // 文本选择器
│  │  │  │  ├──timePickerSample
│  │  │  │  │  └──TimePickerSample.ets                 // 时间选择器
│  │  │  │  └──toggleSample
│  │  │  │     └──ToggleSample.ets                     // 切换按钮
│  │  │  ├──canvas
│  │  │  │  ├──attributesSample
│  │  │  │  │  └──AttributesSample.ets                 // 属性
│  │  │  │  ├──gradientSample
│  │  │  │  │  └──GradientSample.ets                   // 渐变对象
│  │  │  │  ├──imageBitmapSample
│  │  │  │  │  └──ImageBitmapSample.ets                // 位图对象
│  │  │  │  ├──methodsSample
│  │  │  │  │  └──MethodsSample.ets                    // 方法
│  │  │  │  ├──path2dSample
│  │  │  │  │  └──Path2dSample.ets                     // 路径对象
│  │  │  │  ├──sampleResources
│  │  │  │  │  ├──icon.png                     
│  │  │  │  │  └──smoothoff.png                  
│  │  │  │  ├──shadowsSample
│  │  │  │  │  └──ShadowsSample.ets                    // 阴影
│  │  │  │  └──transformSample
│  │  │  │     └──TransformSample.ets                  // 转换
│  │  │  ├──canvasAndGraphicDrawing                    // 画布与图形绘制
│  │  │  │  ├──canvasSample
│  │  │  │  │  └──CanvasSample.ets                     // 画布
│  │  │  │  ├──circleSample
│  │  │  │  │  ├──ChangePanel.ets
│  │  │  │  │  └──CircleSample.ets                     // 圆形
│  │  │  │  ├──ellipseSample
│  │  │  │  │  ├──ChangePanel.ets
│  │  │  │  │  └──EllipseSample.ets                    // 椭圆
│  │  │  │  ├──lineSample
│  │  │  │  │  ├──ChangePanel.ets
│  │  │  │  │  └──LineSample.ets                       // 直线
│  │  │  │  ├──pathSample
│  │  │  │  │  ├──ChangePanel.ets
│  │  │  │  │  └──PathSample.ets                       // 路径
│  │  │  │  ├──polygonSample
│  │  │  │  │  ├──ChangePanel.ets
│  │  │  │  │  └──PolygonSample.ets                    // 多边形
│  │  │  │  ├──polylineSample
│  │  │  │  │  ├──ChangePanel.ets
│  │  │  │  │  └──PolylineSample.ets                   // 折线
│  │  │  │  ├──rectSample
│  │  │  │  │  ├──ChangePanel.ets
│  │  │  │  │  └──RectSample.ets                       // 矩形
│  │  │  │  └──shapeSample
│  │  │  │     ├──ChangePanel.ets
│  │  │  │     └──ShapeSample.ets                      // 指定图形
│  │  │  ├──imageVideoAndMedia
│  │  │  │  ├──imageAnimatorSample
│  │  │  │  │  └──ImageAnimatorSample.ets              // 逐帧播放图片
│  │  │  │  ├──imageSample
│  │  │  │  │  ├──ImageControlPanel.ets
│  │  │  │  │  └──ImageSample.ets                      // 图片
│  │  │  │  ├──pluginComponentSample
│  │  │  │  │  └──PluginComponentSample.ets            // 嵌入式显示
│  │  │  │  ├──videoSample
│  │  │  │  │  ├──VideoControlPanel.ets
│  │  │  │  │  └──VideoSample.ets                      // 视频
│  │  │  │  └──xcomponentSample
│  │  │  │     └──XComponentSample.ets                 // 绘制组件
│  │  │  ├──informationPresentationAndDynamicEffects     
│  │  │  │  ├──dataPanelSample
│  │  │  │  │  └──DataPanelSample.ets                  // 数据面板
│  │  │  │  ├──gaugeSample
│  │  │  │  │  └──GaugeSample.ets                      // 仪表盘
│  │  │  │  ├──imageFitFullSample
│  │  │  │  │  └──ImageFitFullSample.ets               // 动效
│  │  │  │  ├──listSample                              // 列表
│  │  │  │  │  └──ListSample.ets
│  │  │  │  ├──loadingProgressSample
│  │  │  │  │  └──LoadingProgressSample.ets
│  │  │  │  ├──marqueeSample
│  │  │  │  │  └──MarqueeSample.ets                    // 跑马灯
│  │  │  │  ├──particleSample
│  │  │  │  │  └──ParticleSample.ets                   // 粒子效果
│  │  │  │  ├──progressSample
│  │  │  │  │  └──ProgressSample.ets                   // 进度条
│  │  │  │  ├──qrCodeSample
│  │  │  │  │  └──QRCodeSample.ets                     // 二维码
│  │  │  │  ├──scrollToSample
│  │  │  │  │  └──ScrollToSample.ets                   // 动效
│  │  │  │  ├──tapsSwitchSample
│  │  │  │  │  └──TapsSwitchSample.ets                 // 模糊切换
│  │  │  │  ├──textclockSample
│  │  │  │  │  └──TextClockSample.ets                  // 文字时钟
│  │  │  │  └──textTimerSample
│  │  │  │     └──TextTimerSample.ets                  // 文字计时器
│  │  │  ├──listAndGrid
│  │  │  │  ├──gridItemSample
│  │  │  │  │  │──GridItemControlPanel.ets
│  │  │  │  │  └──GridItemSample.ets                   // 网格容器子组件
│  │  │  │  ├──gridSample
│  │  │  │  │  │──GridControlPanel.ets
│  │  │  │  │  └──GridSample.ets                       // 网格容器
│  │  │  │  ├──listItemSample
│  │  │  │  │  └──ListItemSample.ets                   // 列表容器子组件
│  │  │  │  └──listSample
│  │  │  │     │──ListControlPanel.ets
│  │  │  │     └──ListSample.ets                       // 列表容器
│  │  │  ├──navigation
│  │  │  │  ├──navigationSample
│  │  │  │  │  └──NavigationSample.ets                 // 导航根容器
│  │  │  │  ├──navigatorSample
│  │  │  │  │  ├──NavigatorSample.ets                  // 路由
│  │  │  │  │  ├──NavigatorSecondPage.ets
│  │  │  │  │  └──NavigatorThirdPage.ets
│  │  │  │  ├──navRouterSample
│  │  │  │  │  └──NavRouterSample.ets                  // 导航
│  │  │  │  ├──stepperAndStepperItemSample
│  │  │  │  │  └──StepperAndStepperItemSample.ets      // 步骤导航器
│  │  │  │  ├──tabContentSample
│  │  │  │  │  └──TabContentSample.ets                 // 页签子组件
│  │  │  │  └──tabSample
│  │  │  │     ├──TabControlPanel.ets
│  │  │  │     └──TabSample.ets                        // 页签
│  │  │  ├──rowsAndColumns
│  │  │  │  ├──columnSample
│  │  │  │  │  ├──ColumnControlPanel.ets
│  │  │  │  │  └──ColumnSample.ets                     // 列容器
│  │  │  │  ├──columnSplitSample
│  │  │  │  │  └──ColumnSplitSample.ets                // 列分割容器
│  │  │  │  ├──rowSample
│  │  │  │  │  ├──RowControlPanel.ets
│  │  │  │  │  └──RowSample.ets                        // 行容器
│  │  │  │  ├──rowSplitSample
│  │  │  │  │  └──RowSplitSample.ets                   // 行分割容器
│  │  │  │  └──sideBarContainerSample
│  │  │  │     ├──SideBarContainerControlPanel.ets
│  │  │  │     └──SideBarContainerSample.ets           // 侧边栏
│  │  │  ├──scrollAndSwipe
│  │  │  │  ├──scrollSample
│  │  │  │  │  └──ScrollSample.ets                     // 滚动
│  │  │  │  └──swiperSample
│  │  │  │     ├──SwiperControlPanel.ets
│  │  │  │     └──SwiperSample.ets                     // 轮播
│  │  │  ├──stackFlexAndGrid
│  │  │  │  ├──flexSample                               
│  │  │  │  │  ├──FlexControlPanel.ets
│  │  │  │  │  └──FlexSample.ets                       // 弹性布局
│  │  │  │  ├──gridRowSample
│  │  │  │  │  ├──GridRowControlPanel.ets
│  │  │  │  │  └──GridRowSample.ets                    // 栅格系统
│  │  │  │  └──stackSample
│  │  │  │     ├──StackControlPanel.ets
│  │  │  │     └──StackSample.ets                      // 层叠布局
│  │  │  ├──stackFlexAndGrid
│  │  │  │  ├──imageSpanSample
│  │  │  │  │  ├──ChangePanel.ets
│  │  │  │  │  └──ImageSpanSample.ets                  // 行内图像
│  │  │  │  ├──patternLockSample
│  │  │  │  │  ├──ChangePanel.ets
│  │  │  │  │  └──PattternLockSample.ets               // 密码锁
│  │  │  │  ├──richTextSample
│  │  │  │  │  └──RichTextSample.ets                   // 富文本
│  │  │  │  ├──searchSample
│  │  │  │  │  ├──ChangePanel.ets
│  │  │  │  │  └──SearchSample.ets                     // 搜索栏
│  │  │  │  ├──spanSample
│  │  │  │  │  ├──ChangePanel.ets
│  │  │  │  │  └──SpanSample.ets                       // 行内文本
│  │  │  │  ├──textAreaSample
│  │  │  │  │  ├──ChangePanel.ets
│  │  │  │  │  └──TextAreaSample.ets                   // 文本域
│  │  │  │  ├──textInputSample
│  │  │  │  │  └──TextInputSample.ets                  // 文本输入
│  │  │  │  └──textSample
│  │  │  │     ├──ChangePanel.ets
│  │  │  │     └──TextSample.ets                       // 文本
│  │  │  ├────web
│  │  │  │  └────webSample
│  │  │  │     └──WebSample.ets                        // 网页
│  │  │  └──ComponentData.ets
│  │  ├──globalMethods                                 // 详情页面
│  │  │  ├──dialogs
│  │  │  │  ├──actionSheetDialogSample
│  │  │  │  │  └──ActionSheetDialogSample.ets          // 列表选择弹窗
│  │  │  │  ├──alertDialogSample
│  │  │  │  │  └──AlertDialogSample.ets                // 警告弹窗
│  │  │  │  ├──customDialogSample
│  │  │  │  │  │──CustomDialog.ets
│  │  │  │  │  └──CustomDialogSample.ets               // 自定义弹窗
│  │  │  │  ├──dateDialogSample
│  │  │  │  │  └──DateDialogSample.ets                 // 日期选择弹窗
│  │  │  │  ├──menuSample
│  │  │  │  │  └──MenuSample.ets                       // 菜单
│  │  │  │  ├──textPickerDialogSample
│  │  │  │  │  └──TextPickerDialogSample.ets           // 文本滑动选择器弹窗
│  │  │  │  └──timeDialogSample
│  │  │  │     └──TimeDialogSample.ets                 // 时间选择弹窗
│  │  │  └──GlobalMethodData.ets
│  │  ├──universal                                     // 详情页面
│  │  │  ├──events
│  │  │  │  ├──areaChangeEventSample
│  │  │  │  │  └──AreaChangeEventSample.ets            // 组件区域变化事件
│  │  │  │  ├──clickEventSample
│  │  │  │  │  └──ClickEventSample.ets                 // 点击事件
│  │  │  │  ├──dragEventSample
│  │  │  │  │  ├──component                            // 组件拖拽
│  │  │  │  │  │  ├──GridItemDrag.ets
│  │  │  │  │  │  ├──HyperlinkDrag.ets
│  │  │  │  │  │  ├──ImageDrag.ets
│  │  │  │  │  │  ├──ListItemDrag.ets
│  │  │  │  │  │  ├──TextDrag.ets
│  │  │  │  │  │  └──VideoDrag.ets
│  │  │  │  │  └──DragEventSample.ets                  // 拖拽事件
│  │  │  │  ├──focusEventSample
│  │  │  │  │  └──FocusEventSample.ets                 // 焦点事件
│  │  │  │  ├──keyPressEventSample
│  │  │  │  │  └──KeyPressEventSample.ets              // 按压事件
│  │  │  │  ├──mountUnmountEventSample
│  │  │  │  │  └──MountUnmountEventSample.ets          // 挂载卸载事件
│  │  │  │  ├──mouseEventSample
│  │  │  │  │  └──MouseEventSample.ets                 // 鼠标事件
│  │  │  │  ├──scrollEventSample
│  │  │  │  │  └──ScrollEventSample.ets                // 滚动事件
│  │  │  │  └──touchEventSample
│  │  │  │     └──TouchEventSample.ets                 // 触摸事件
│  │  │  ├──gesture
│  │  │  │  ├──bindGestureSample 
│  │  │  │  │  └──BindGestureSample.ets                // 绑定手势方法
│  │  │  │  ├──combinedSample
│  │  │  │  │  └──CombinedSample.ets                   // 组合手势
│  │  │  │  ├──longPressSample
│  │  │  │  │  └──LongPressSample.ets                  // 长按手势
│  │  │  │  ├──panSample
│  │  │  │  │  └──PanSample.ets                        // 拖动手势
│  │  │  │  ├──pinchSample
│  │  │  │  │  └──PinchSample.ets                      // 捏合手势
│  │  │  │  ├──rotationSample
│  │  │  │  │  └──RotationSample.ets                   // 旋转手势
│  │  │  │  ├──swipeSample
│  │  │  │  │  └──SwipeSample.ets                      // 滑动手势
│  │  │  │  └──tapGestureSample
│  │  │  │     └──TapGestureSample.ets                 // Tap手势
│  │  │  ├──properties
│  │  │  │  ├──backgroundSample
│  │  │  │  │  ├──BackgroundSample.ets                 // 背景
│  │  │  │  │  └──ChangePanel.ets                 
│  │  │  │  ├──borderSample
│  │  │  │  │  └──BorderSample.ets                     // 边框
│  │  │  │  ├──componentBlurredSample
│  │  │  │  │  └──ComponentBlurredSample.ets           // 分布式迁移标识
│  │  │  │  ├──componentIDSample
│  │  │  │  │  └──ComponentIDSample.ets                // 组件标识
│  │  │  │  ├──displaySample
│  │  │  │  │  └──DisplaySample.ets                    // 显示
│  │  │  │  ├──effectsSample
│  │  │  │  │  ├──ChangePanel.ets
│  │  │  │  │  └──EffectsSample.ets                    // 互动
│  │  │  │  ├──flexSample
│  │  │  │  │  └──FlexSample.ets                       // flex布局
│  │  │  │  ├──focusControlSample
│  │  │  │  │  └──FocusControlSample.ets               // 焦点控制
│  │  │  │  ├──fontSample
│  │  │  │  │  └──FontSample.ets                       // 字体
│  │  │  │  ├──foregroundSample
│  │  │  │  │  └──ForegroundSample.ets                 // 前景
│  │  │  │  ├──gridSettingsSample
│  │  │  │  │  └──GridSettingsSample.ets               // 栅格设置
│  │  │  │  ├──interactionSample
│  │  │  │  │  └──InteractionSample.ets                // 图像效果
│  │  │  │  ├──layoutConstraintSample
│  │  │  │  │  └──LayoutConstraintSample.ets           // 布局约束
│  │  │  │  ├──locationSample
│  │  │  │  │  └──LocationSample.ets                   // 位置设置
│  │  │  │  ├──pictureBorderSample
│  │  │  │  │  └──PictureBorderSample.ets              // 图片边框设置
│  │  │  │  ├──restoreIdSample
│  │  │  │  │  └──RestoreIdSample.ets                  // 分布式迁移标识
│  │  │  │  ├──rotateSample
│  │  │  │  │  └──RotateSample.ets                     // 旋转
│  │  │  │  ├──safeAreaSample
│  │  │  │  │  ├──ChangePanel.ets
│  │  │  │  │  └──SafeAreaSample.ets                   // 安全区域
│  │  │  │  ├──scaleSample
│  │  │  │  │  └──ScaleSample.ets                      // 缩放
│  │  │  │  ├──shapeCropSample
│  │  │  │  │  └──ShapeCropSample.ets                  // 形状裁剪
│  │  │  │  ├──sizeSample
│  │  │  │  │  └──SizeSample.ets                       // 尺寸
│  │  │  │  ├──transformSample
│  │  │  │  │  └──TransformSample.ets                  // 变换矩阵
│  │  │  │  └──translateSample
│  │  │  │     └──TranslateSample.ets                  // 图像变换
│  │  │  └──UniversialData.ets
│  │  └──Index.ets                                     // 首页
│  └──util
│     ├──Logger.ts                                     // 打印
│     └──ShowToast.ets                                 // 弹窗   
└──entry/src/main/resources                            // 资源文件夹

具体实现

本示例使用Tabs容器组件搭建整体应用框架，每个TabContent内容视图使用List容器组件布局，在每个ListItem中使用循环渲染加载此分类下分类导航数据，底部导航菜单使用TabContent中tabBar属性设置自定义样式。

将组件库分成四大类，切换查看
- 组件模块：
  - 空白与分隔
    - 封装自定义组件：CommonItemSlider，CommonItemSelect，CommonItemColorSelect
    - 接口参考：@ohos.app.ability.common
  - 按钮与选择
    - 实现按钮，时间选择器，单选按钮，选择菜单，滑动条，切换按钮，勾选框，文本选择器，时间选择器，计数器，评分条组件功能
  - 滚动与滑动
    - 实现滚动，翻页组件功能
  - 信息展示与功效
    - 实现二维码，进度条，跑马灯，文字计时器，文字时钟，仪表盘，数据面板组件功能
  - 文本与输入
    - 实现行内文本，行内图像，文本输入，文本，富文本组件功能
  - 辅助
    - 实现标记，滚动条，下拉刷新，弹出面板，字母索引条组件功能
  - 画布
    - 实现图形绘制属性，图形绘制方法，渐变对象绘制，路径对象绘制，位图的绘制，阴影绘制，变换绘制
  - 行列与分栏
    - 实现页面水平布局，垂直布局，水平分割布局，垂直分割布局
  - 堆叠、Flex与栅格
    - 实现堆叠，Flex，栅格容器组件功能
  - 列表与宫格
    - 实现列表容器，网格容器组件功能
  - 导航
    - 实现列表Navigation，路由容器，页签，步骤导航器，导航组件功能
  - 画布与图形绘制
    - 实现画布组件，圆形，椭圆，直线等绘制组件功能
  - 图片视频与媒体
    - 实现图片，帧动画，视频，XComponent，外部应用组件功能
  - 网页
    - 实现web组件功能
- 通用模块：
  - 通用事件
    - 用到全局组件TitleBar，IntroductionTitle实现页面
    - resetBallMotion，isSideReached，calculateReachedSide，decideMoveDirection方法计算区域坐标，moveBall方法移动球体
  - 通用属性
    - 使用全局组件TitleBar，AttributeModificationTool实现组件页面
    - 接口参考：@ohos.promptAction
  - 手势处理
    - 使用全局组件TitleBar，AttributeModificationTool实现组件页面
- 动画模块：
  - 转场动画
    - 用到全局组件TitleBar，IntroductionTitle实现页面
    - 接口参考：@ohos.promptAction
  - 插值计算
    - 用到全局组件TitleBar，IntroductionTitle实现页面
    - 接口参考：@ohos.curves， @ohos.router
  - 显式动画
    - 用到全局组件TitleBar，IntroductionTitle实现页面
    - 接口参考：animateTo
  - 属性动画
    - 用到全局组件TitleBar，IntroductionTitle实现页面
    - 接口参考：animation
  - 路径动画
    - 用到全局组件TitleBar，IntroductionTitle实现页面
    - 接口参考：path
- 全局方法模块：
  - 弹窗
    - 使用全局组件ShowToast，TitleBar，IntroductionTitle实现弹窗组件页面
  - 菜单
    - 使用全局组件ShowToast，TitleBar，IntroductionTitle实现菜单组件页面