OpenHarmony开发指南：ArkUI组件集合规范

于 2024-07-21 21:21:52 发布
阅读量457 收藏 11
点赞数 7
分类专栏： OpenHarmony 鸿蒙 HarmonyOS 文章标签： 开发语言 harmonyos 华为 鸿蒙 鸿蒙开发 udp android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DMZDAMS/article/details/140593944
版权
鸿蒙 同时被 3 个专栏收录
139 篇文章 1 订阅
订阅专栏
OpenHarmony
137 篇文章 0 订阅
订阅专栏
HarmonyOS
133 篇文章 0 订阅
订阅专栏

介绍

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

效果预览

绑定通用动画全局方法

Button 按钮onClick 点击事件元素共享转场警告弹窗

使用说明：

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

  2. 点击二级导航（如通用属性、通用事件等），若存在三级导航则展开三级导航（如Border 边框、点击事件等）；若不存在三级导航，则跳转至详情页面。

  3. 若存在三级导航（如Border 边框、点击事件等），点击跳转至详情页面。

  4. 打开通用视图下拖拽事件界面需先安装DragEvent应用。

工程目录

entry/src/main/ets/
|---component
|   |---AttributeModificationTool.ets                    // 组件
|   |---IntroductionTitle.ets                            // 首页介绍标题组件
|   |---TabContentNavigation.ets                         // 切换组件
|   |---TitleBar.ets                                     // 详情页面标题组件
|---Application
|   |---MyAbilityStage.ts              
|---data
|   |---CollectionCategory.ts                            // 数据分类
|   |---ResourceDataHandle.ts                            // 源数据
|---MainAbility
|   |---MainAbility.ts              
|---model
|   |---CategoricalDataType.ts                           // 数据类型
|---util
|   |---Logger.ts                                        // 打印
|   |---ShowToast.ets                                    // 弹窗                       
|---pages
|   |---Index.ets                                        // 首页
|   |---animations                                       // 动画
|   |   |---AnimationData.ets
|   |   |---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                           
|   |---components                                       
|   |   |---ComponentData.ets
|   |   |---auxiliary                                    // 辅助
|   |   |   |---alphabetIndexerSample
|   |   |   |   |---AlphabetIndexerSample.ets            // 字母索引条
|   |   |   |---badgeSample
|   |   |   |   |---BadgeSample.ets                      // 标记
|   |   |   |---panelSample
|   |   |   |   |---PanelSample.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                     // 切换按钮
|   |   |---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
|   |   |   |   |---ShapeSample.ets                      // 指定图形
|   |   |---imageVideoAndMedia
|   |   |   |---imageAnimatorSample
|   |   |   |   |---ImageAnimatorSample.ets              // 逐帧播放图片
|   |   |   |---imageSample
|   |   |   |   |---ImageControlPanel.ets
|   |   |   |   |---ImageSample.ets                      // 图片
|   |   |   |---pluginComponentSample
|   |   |   |   |---PluginComponentSample.ets			 // 嵌入式显示
|   |   |   |---videoSample
|   |   |   |   |---VideoControlPanel.ets
|   |   |   |   |---VideoSample.ets                      // 视频
|   |   |   |---xcomponentSample
|   |   |   |   |---XComponentSample.ets                 // 绘制组件
|   |   |---canvas
|   |   |   |---attributesSample
|   |   |   |   |---AttributesSample.ets                 // 属性
|   |   |   |---gradientSample
|   |   |   |   |---GradientSample.ets                   // 渐变对象
|   |   |   |---image_bitmapSample
|   |   |   |   |---Image_bitmapSample.ets               // 位图对象
|   |   |   |---methodsSample
|   |   |   |   |---MethodsSample.ets                    // 方法
|   |   |   |---path2dSample
|   |   |   |   |---Path2dSample.ets                     // 路径对象
|   |   |   |---shadowsSample
|   |   |   |   |---ShadowsSample.ets                    // 阴影
|   |   |   |---transformSample
|   |   |   |   |---TransformSample.ets                  // 转换
|   |   |---informationPresentationAndDynamicEffects     
|   |   |   |---dataPanelSample
|   |   |   |   |---DataPanelSample.ets                  // 数据面板
|   |   |   |---gaugeSample
|   |   |   |   |---GaugeSample.ets                      // 仪表盘
|   |   |   |---imageFitFullSample
|   |   |   |   |---ImageFitFullSample.ets               // 动效
|   |   |   |---loadingProgressSample
|   |   |   |   |---LoadingProgressSample.ets
|   |   |   |---listSample                               // 列表
|   |   |   |   |---ListSample.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                       // 列表容器
|   |   |   |---waterFlowSample
|   |   |   |   |---WaterFlowDataSource.ets
|   |   |   |   |---WaterFlowSample.ets                  // WaterFlow
|   |   |---navigation
|   |   |   |---navigatorSample
|   |   |   |   |---NavigatorSample.ets                  // 路由
|   |   |   |   |---NavigatorSecondPage.ets
|   |   |   |   |---NavigatorThirdPage.ets
|   |   |   |---navigationSample
|   |   |   |   |---NavigationSample.ets                 // 导航根容器
|   |   |   |   |---NavigationBasic.ets                  // 导航基础属性展示
|   |   |   |   |---ListExpandSafeArea.ets               // 滚动组件避让导航条
|   |   |   |   |---NavigationSplit.ets               	 // 导航分栏模式
|   |   |   |   |---NavigationRouter.ets               	 // Navigation动态路由
|   |   |   |   |---NavigationModeChange.ets             // Navigation模式自动切换
|   |   |   |   |---NavigationReplace.ets                // 导航页面替换
|   |   |   |   |---BindSheetSafeArea.ets                // BindSheet键盘避让
|   |   |   |   |---NavigationSideBar.ets                // 导航分栏鼠标样式
|   |   |   |   |---NavigationHideBar.ets                // 隐藏Navigation导航条
|   |   |   |   |---NavigationFullSafeArea.ets           // 导航组件扩展安全区
|   |   |   |   |---NavigationExpandSafeArea.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
|   |   |   |   |---SwiperCustomAnimationControlPanel.ets
|   |   |   |   |---SwiperSample.ets                     // 轮播
|   |   |---stackFlexAndGrid
|   |   |   |---flexSample                               
|   |   |   |   |---FlexControlPanel.ets
|   |   |   |   |---FlexSample.ets                       // 弹性布局
|   |   |   |---gridContainerSample
|   |   |   |   |---GridContainerControlPanel.ets
|   |   |   |   |---GridContainerSample.ets              // 栅格系统
|   |   |   |---stackSample
|   |   |   |   |---StackControlPanel.ets
|   |   |   |   |---StackSample.ets                      // 层叠布局
|   |   |---textAndInput
|   |   |   |---patternLockSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---PattternLockSample.ets               // 密码锁
|   |   |   |---searchSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---SearchSample.ets                     // 搜索栏
|   |   |   |---imageSpanSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---imageSpanSample.ets                  // 行内图像
|   |   |   |---textAreaSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---TextAreaSample.ets                   // 文本域
|   |   |   |---richEditorSample
|   |   |   |   |---RichEditorSample.ets             // 富文本编辑
|   |   |   |   |---Title.ets
|   |   |   |---richTextSample
|   |   |   |   |---RichTextSample.ets                   // 富文本
|   |   |   |---spanSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---SpanSample.ets                       // 行内文本
|   |   |   |---textInputSample
|   |   |   |   |---TextInputSample.ets                  // 文本输入
|   |   |   |---textSample
|   |   |   |   |---ChangePanel.ets
|   |   |   |   |---TextSample.ets                       // 文本
|   |   |   |---textStyledStringSample
|   |   |   |   |---TextStyledStringSample.ets           // 文本属性字符串
|   |   |---web
|   |   |   |---webSample
|   |   |   |   |---WebSample.ets                        // 网页
|   |---globalMethods                                    // 详情页面
|   |   |---GlobalMethodData.ets
|   |   |---dialogs
|   |   |   |---alertDialogSample
|   |   |   |   |---AlertDialogSample.ets                // 警告弹窗
|   |   |   |---customDialogSample
|   |   |   |   |---CustomDialog.ets
|   |   |   |   |---CustomDialogSample.ets               // 自定义弹窗
|   |   |   |---dateDialogSample
|   |   |   |   |---DateDialogSample.ets                 // 日期选择弹窗
|   |   |   |---timeDialogSample
|   |   |   |   |---TimeDialogSample.ets                 // 时间选择弹窗
|   |   |   |---actionSheetDialogSample
|   |   |   |   |---ActionSheetDialogSample.ets          // 列表选择弹窗
|   |   |   |---textPickerDialogSample
|   |   |   |   |---TextPickerDialogSample.ets           // 文本滑动选择器弹窗
|   |   |   |---menuSample
|   |   |   |   |---MenuSample.ets                       // 菜单
|   |   |   |---bindSheetSample
|   |   |   |   |---BindSheetSample.ets                  // 半模态
|   |   |   |---popUpSample
|   |   |   |   |---PopUpSample.ets                      // Popup
|   |---universal                                        // 详情页面
|   |   |---UniversialData.ets
|   |   |---events
|   |   |   |---areaChangeEventSample
|   |   |   |   |---AreaChangeEventSample.ets            // 组件区域变化事件
|   |   |   |---clickEventSample
|   |   |   |   |---ClickEventSample.ets                 // 点击事件
|   |   |   |---dragEventSample
|   |   |   |   |---component                            // 组件拖拽
|   |   |   |   |   |---FormComponentDrag.ets
|   |   |   |   |   |---GridItemDrag.ets
|   |   |   |   |   |---HyperlinkDrag.ets
|   |   |   |   |   |---ImageDrag.ets
|   |   |   |   |   |---ListItemDrag.ets
|   |   |   |   |   |---MultiSelectDrag.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                 // 触摸事件
|   |   |   |---customEventSample
|   |   |   |   |---CustomEventHome.ets                  // 自定义事件分发入口
|   |   |   |   |---CustomClickEvent.ets                 // 自定义click事件分发
|   |   |   |   |---CustomScrollingEvent.ets             // 自定义scrolling事件分发
|   |   |---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手势
|   |   |   |---customGesture
|   |   |   |   |---CustomGestureJudge.ets               // 自定义手势判定
|   |   |---properties
|   |   |   |---attributeModifierSample
|   |   |   |   |---AttributeModifierSample.ets          // 动态属性设置
|   |   |   |---foregroundSample
|   |   |   |   |---ForegroundSample.ets                 // 前景
|   |   |   |---backgroundSample
|   |   |   |   |---BackgroundSample.ets                 // 背景
|   |   |   |---borderSample
|   |   |   |   |---BorderSample.ets                     // 边框
|   |   |   |---outlineSample
|   |   |   |   |---OutlineSample.ets                    // 外边框
|   |   |   |---componentBlurredSample
|   |   |   |   |---ComponentBlurredSample.ets           // 分布式迁移标识
|   |   |   |---componentIDSample
|   |   |   |   |---ComponentIDSample.ets                // 组件标识
|   |   |   |---displaySample
|   |   |   |   |---DisplaySample.ets                    // 显示
|   |   |   |---effectsSample
|   |   |   |   |---EffectsSample.ets                    // 互动
|   |   |   |---flexSample
|   |   |   |   |---FlexSample.ets                       // flex布局
|   |   |   |---focusControlSample
|   |   |   |   |---FocusControlSample.ets               // 焦点控制
|   |   |   |---fontSample
|   |   |   |   |---FontSample.ets                       // 字体
|   |   |   |---gridSettingsSample
|   |   |   |   |---GridSettingsSample.ets               // 栅格设置
|   |   |   |---interactionSample
|   |   |   |   |---InteractionSample.ets                // 图像效果
|   |   |   |---layoutConstraintSample
|   |   |   |   |---LayoutConstraintSample.ets           // 布局约束
|   |   |   |---locationSample
|   |   |   |   |---LocationSample.ets                   // 位置设置
|   |   |   |---pictureBorderSample
|   |   |   |   |---PictureBorderSample.ets              // 图片边框设置
|   |   |   |---restoreIdSample
|   |   |   |   |---RestoreIdSample.ets                  // 分布式迁移标识
|   |   |   |---rotateSample
|   |   |   |   |---RotateSample.ets                     // 旋转
|   |   |   |---scaleSample
|   |   |   |   |---ScaleSample.ets                      // 缩放
|   |   |   |---shapeCropSample
|   |   |   |   |---ShapeCropSample.ets                  // 形状裁剪
|   |   |   |---safeAreaSample
|   |   |   |   |---SafeAreaSample.ets                   // 安全区域
|   |   |   |---sizeSample
|   |   |   |   |---SizeSample.ets                       // 尺寸
|   |   |   |---transformSample
|   |   |   |   |---TransformSample.ets                  // 变换矩阵
|   |   |   |---translateSample
|   |   |   |   |---TranslateSample.ets                  // 图像变换

具体实现

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

  • 将组件库分成四大类，切换查看

    • 组件模块：

      • 空白与分隔

        • 封装自定义组件：CommonItemSlider，CommonItemSelect，CommonItemColorSelect
        • 接口参考：@ohos.app.ability.common

      • 按钮与选择

        • 使用全局组件ShowToast,TitleBar,IntroductionTitle实现按钮，时间选择器，单选按钮，选择菜单，滑动条，切换按钮，勾选框，文本选择器，时间选择器，计数器，评分条组件功能
        • 使用getStringArrayData，getStringData获取数据ResourceDataHandle.ets

      • 滚动与滑动

        • 使用全局组件TitleBar实现滚动，翻页组件功能

      • 信息展示与功效

        • 使用全局组件TitleBar，AttributeModificationTool实现二维码，进度条，跑马灯，文字计时器，文字时钟，仪表盘，数据面板组件功能
        • 使用getStringArrayData，getStringData获取数据ResourceDataHandle.ets

      • 文本与输入

        • 使用全局组件ShowToast，TitleBar，AttributeModificationTool,IntroductionTitle实现行内文本，行内图像，文本输入，文本，富文本组件功能
        • 使用getStringArrayData，getStringData获取数据ResourceDataHandle.ets

      • 辅助

        • 使用全局组件TitleBar实现标记，滚动条，下拉刷新，弹出面板，字母索引条组件功能
        • 使用getStringArrayData，getStringData获取数据ResourceDataHandle.ets

      • 画布

        • 使用全局组件TitleBar, CanvasGradient, CanvasPattern, ImageBitmap, Path2D等实现图形绘制属性，图形绘制方法，渐变对象绘制，路径对象绘制，位图的绘制，阴影绘制，变换绘制
        • 使用getStringArrayData，getStringData获取数据ResourceDataHandle.ets

    • 通用模块：

      • 通用事件

        • 用到全局组件TitleBar，IntroductionTitle实现页面
        • resetBallMotion，isSideReached，calculateReachedSide，decideMoveDirection方法计算区域坐标，moveBall方法移动球体

      • 通用属性

        • 使用全局组件TitleBar，AttributeModificationTool实现组件页面
        • 接口参考：@ohos.promptAction

    • 动画模块：

      • 转场动画

        • 用到全局组件TitleBar，IntroductionTitle实现页面
        • 接口参考：@ohos.promptAction

      • 插值计算

      • 显示动画

        • 用到全局组件TitleBar，IntroductionTitle实现页面
        • 接口参考：animateTo

      • 属性动画

        • 用到全局组件TitleBar，IntroductionTitle实现页面
        • 接口参考：animation

      • 路径动画

        • 用到全局组件TitleBar，IntroductionTitle实现页面
        • 接口参考：path

    • 全局方法模块：

      • 弹窗

        • 使用全局组件ShowToast，TitleBar，IntroductionTitle实现弹窗组件页面
        • 使用getStringArrayData，getStringData获取数据ResourceDataHandle.ets

      • 半模态

        • 使用全局组件TitleBar，IntroductionTitle实现半模态组件页面
        • 接口参考：bindSheet

      • Popup

约束与限制

1.本示例仅支持标准系统上运行，支持设备：RK3568。

2.本示例仅支持API12版本SDK，SDK版本号(5.0.0.23 Canary2),镜像版本号( OpenHarmony 5.0.0.23)。

3.本示例需要使用DevEco Studio 版本号(4.1.3.500)及以上版本才可编译运行。

4.本示例涉及ohos.permission.GET_BUNDLE_INFO_PRIVILEGED、ohos.permission.REQUIRE_FORM为system_basic级别（相关权限级别可通过权限定义列表 查看），需要配置高权限签名，可参考应用apl等级说明。

5.本示例涉及系统接口，需要配置系统应用签名，可以参考修改harmonyappprovision配置文件 ，把配置文件中的“app-feature”字段信息改为“hos_system_app”。

下载

如需单独下载本工程，执行如下命令：

git init
git config core.sparsecheckout true
echo code/UI/ArkTsComponentCollection/ComponentCollection/ > .git/info/sparse-checkout
git remote add origin https://gitee.com/openharmony/applications_app_samples.git
git pull origin master

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。 

点击领取→【纯血版鸿蒙全套最新学习资料】（安全链接，放心点击）希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、（南向驱动、嵌入式等）鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

 鸿蒙（HarmonyOS NEXT）最新学习路线

​

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

HarmonyOS Next 最新全套视频教程

​

 《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

​

《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……​

《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

​

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

​

大厂面试必问面试题

​

鸿蒙南向开发技术

​

鸿蒙APP开发必备

​

鸿蒙生态应用开发白皮书V2.0PDF

​


请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结
总的来说，华为鸿蒙不再兼容安卓，对中年程序员来说是一个挑战，也是一个机会。只有积极应对变化，不断学习和提升自己，才能在这个变革的时代中立于不败之地。 

                   

代码中的爱马仕
关注
  • 7
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
openharmony的第三方组件适配移植
08-05
标题 "openharmony的第三方组件适配移植" 暗示了本文将深入探讨如何将非OpenHarmony原生的组件或服务适配并移植到OpenHarmony操作系统中，以扩展其功能和应用范围。OpenHarmony是一个开源的、面向全场景的分布式操作...
基于OpenHarmony系统ArkUI框架开发的哔哩哔哩动画第三方客户端
11-11
2. **组件化**：ArkUI提供了丰富的组件库，如按钮、输入框、列表等，方便开发者快速构建用户界面。同时，开发者还可以自定义组件，满足特定需求。 3. **动态化**： ArkUI支持动态更新界面，使得应用可以在运行时...
OpenHarmony应用开发—ArkUI组件集合
maniuT的博客
05-31 954
本示例为 ArkUI 中组件、通用、动画、全局方法的集合。效果预览使用说明：1.点击组件、通用、动画、全局方法四个按钮或左右滑动切换不同视图。2.点击二级导航（如通用属性、通用事件等），若存在三级导航则展开三级导航（如 Border 边框、点击事件等）；若不存在三级导航，则跳转至详情页面。3. 若存在三级导航（如 Border 边框、点击事件等），点击跳转至详情页面。工程目录| |---AttributeModificationTool.ets // 组件。
OpenHarmony开发指南：NDK开发
DMZDAMS的博客
06-21 823
Native API是OpenHarmony SDK上提供的一组native开发接口与工具集合（也称为NDK）
OpenHarmony教程指南—ArkUI中组件、通用、动画、全局方法的集合
m0_70749039的博客
03-07 892
本示例为ArkUI中组件、通用、动画、全局方法的集合。 本示例使用 Tabs容器组件搭建整体应用框架，每个 TabContent内容视图 使用 div容器组件 嵌套布局，在每个 div 中使用 循环渲染 加载此分类下分类导航数据，底部导航菜单使用 TabContent中tabBar属性 设置自定义样式 。通过组件、通用、动画、全局方法四个大类展现了ArkUI的能力，并把四大类中的功能进行了分类，方便开发者查看，每个示例又结合了不同的展现方式，以契合实际应用场景为主生动的体现了ArkUI能力的用法。
HarmonyOS开发实战指南：UI组件性能优化
m0_64422261的博客
07-12 1053
应用启动到UI页面展示过程包含框架初始化、页面加载和布局渲染三个步骤。其中页面加载和布局渲染的主要流程如下：
鸿蒙开发组件：【ServiceAbility组件概述与配置】
m0_70748845的博客
06-19 934
ServiceAbility，即"基于Service模板的Ability"，主要用于后台运行任务（如执行音乐播放、文件下载等），不提供用户交互界面。ServiceAbility可由其他应用或PageAbility启动，即使用户切换到其他应用，ServiceAbility仍将在后台继续运行。
OpenHarmony开发实战—系统能力SystemCapability使用指南
m0_64422261的博客
06-20 625
系统能力与API
HarmonyOS驱动开发实战指南：分层架构设计
DMZDAMS的博客
07-12 1056
HarmonyOS应用的分层架构主要包括三个层次：产品定制层、基础特性层和公共能力层，为开发者构建了一个清晰、高效、可扩展的设计架构。
【鸿蒙实战开发】Fabric 自定义组件开发指南
HarmonyOSMN的博客
07-09 1019
创建一个 Fabric 组件需要实现以下的代码：ComponentInstance：ComponentInstance文件是该自定义组件所有的逻辑集合，也是自定义组件主要需要实现的部分，简单理解就是，一个自定义组件文件对应一个ComponentInstance。Package文件：作用是声明创建该自定义组件的声明，指定创建Instance时会根据Packeage文件内的名称对应，从而生成对应的Instance对象。
鸿蒙Next实战开发-OpenHarmony的NDK开发
m0_70749039的博客
05-29 799
▍Native API目录结构NDK方式是应用层直接调用底层库或者三方库目前看最常规的方式；4.0(API10)有ndk 46个，3.2(API9)有ndk 28个，实质代码里有更多的ndk，RK的原因没有编出更多，比如sensor部分就没有编译出来；划重点，NDK里有两种api：node-api，用于arkts和c++调用和传递数据；c/c++ api，可以把动态库打包成应用侧c++直接调用的接口；
HarmonyOS Next开发学习手册——DataAbility组件
maniuT的博客
06-26 754
DataAbility的提供方和使用方都通过URI（Uniform Resource Identifier）来标识一个具体的数据，例如数据库中的某个表或磁盘上的某个文件。此处的URI仍基于URI通用标准，格式如下：scheme：协议方案名，固定为"dataability"，代表Data Ability所使用的协议类型。authority：设备ID。如果为跨设备场景，则为目标设备的ID；如果为本地设备场景，则不需要填写。path：资源的路径信息，代表特定资源的位置信息。query：查询参数。
ArkUI框架是OpenHarmony UI开发框架
05-26
ArkUI框架是OpenHarmony UI开发框架，提供开发者进行应用UI开发时所必需的能力，包括UI组件、动画、绘制、交互事件、JS API扩展机制等。ArkUI框架提供了两种开发范式，分别是基于ArkTS的声明式开发范式（简称“声明...
ArkUI组件库示例App 包括基础组件、容器组件、弹窗组件，可以在预览器或真机中，实时预览组件接口、属性调整的效果
01-08
总结来说， ArkUI 组件库示例App是一个强大的学习工具，它通过实例展示了OpenHarmony高级UI组件的功能和使用方法，帮助开发者快速掌握ArkUI，进而提升OpenHarmony应用的开发质量和用户体验。无论是新手还是经验丰富...
【C++&Python&Java】字符处理详细解读_字符_ASCLL码_字母数字转换_算法竞赛_开发语言
YLCHUP的博客
07-15 2895
C++和Python和Java三语言超全讲解，详细辨析字符的妙用。让你熟练玩转“字符”这一数据类型。快来看ヾ(•ω•`)o
【HarmonyOS学习】Calendar Kit日历管理
包包熊的博客
07-16 701
Calendar Kit为用户提供了一系列接口来获取日历账户，并使用特定的接口向日历账户中写入日程。 如果写入的日程带有提醒时间则系统会在时间到达时向用户发送提醒。
【HarmonyOS学习】动画
包包熊的博客
07-16 413
分类介绍了常用动画的类型，并包含相关示例代码方便学习
HarmonyOS NEXT零基础入门到实战-第二部分
最新发布
sxwn123的专栏
07-20 297
tabBar(this.myBuilder(0, '购物车', $r('app.media.startIcon'), $r('app.media.xm'))).tabBar(this.myBuilder(1, '我的', $r('app.media.startIcon'), $r('app.media.hw'))).tabBar(this.myBuilder(2, '我的', $r('app.media.startIcon'), $r('app.media.hw')))（文字、图片...）
鸿蒙Navigation路由能力汇总
qq_36859035的博客
07-17 226
属性汇总：https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-navigation。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值