OpenHarmony应用开发—ArkUI组件集合
介绍
本示例为 ArkUI 中组件、通用、动画、全局方法的集合。
效果预览
使用说明：
1.点击组件、通用、动画、全局方法四个按钮或左右滑动切换不同视图。
2.点击二级导航（如通用属性、通用事件等），若存在三级导航则展开三级导航（如 Border 边框、点击事件等）；若不存在三级导航，则跳转至详情页面。
3. 若存在三级导航（如 Border 边框、点击事件等），点击跳转至详情页面。
工程目录
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
| | |---interpolationCalculationSample
| | | |---InterpolationCalculationSample.ets // 插值计算
| | |---pageTransitionSample
| | | |---PageTransitionSample.ets // 页面间转场
| | | |---PageTransitionSampleTo.ets
| | |---shareElementTransitionSample
| | | |---ShareElementTransitionSample.ets // 共享元素转场
| | | |---ShareElementTransitionSampleTo.ets
| | |---floatingSample
| | | |---FloatingWindowSample.ets // 悬浮窗
| | |---folderSample
| | | |---FolderSample.ets // 文件夹展开
| | |---systemIcon
| | | |---SystemIcon.ets // 系统图标
| | |---gallerySample
| | | |---GalleryCardSample.ets // 图库卡片展开
| | |---multiplexSample
| | | |---MultiplexSample.ets // 多任务
| | |---shopSample
| | | |---ShopCardSample.ets // 商店卡片展开
| | |---layoutAnimationSample
| | | |---LayoutAnimationSample.ets // 布局动效
| | |---sideBarTransitionSample
| | | |---SideBarTransitionSample.ets // 侧边栏动效
| | |---sizeTransitionSample
| | | |---SizeTransitionSample.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 // 仪表盘
| | | |---loadingProgressSample
| | | | |---LoadingProgressSample.ets
| | | |---listSample // 列表
| | | | |---ListSample.ets
| | | |---marqueeSample
| | | | |---MarqueeSample.ets // 跑马灯
| | | |---radioSample
| | | | |---RadioSample.ets // 单选
| | | |---progressSample
| | | | |---ProgressSample.ets // 进度条
| | | |---qrCodeSample
| | | | |---QRCodeSample.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 // 导航
| | | | |---NavigationSecondPage.ets
| | | | |---NavigationThirdPage.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 // 弹性布局
| | | |---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 // 文本域
| | | |---richTextSample
| | | | |---RichTextSample.ets // 富文本
| | | |---spanSample
| | | | |---ChangePanel.ets
| | | | |---SpanSample.ets // 行内文本
| | | |---textInputSample
| | | | |---TextInputSample.ets // 文本输入
| | | |---textSample
| | | | |---ChangePanel.ets
| | | | |---TextSample.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 // 菜单
| |---universal // 详情页面
| | |---UniversialData.ets
| | |---events
| | | |---areaChangeEventSample
| | | | |---AreaChangeEventSample.ets // 组件区域变化事件
| | | |---clickEventSample
| | | | |---ClickEventSample.ets // 点击事件
| | | |---dragEventSample
| | | | |---component // 组件拖拽
| | | | | |---FormComponentDrag.ets
| | | | | |---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
| | | |---foregroundSample
| | | | |---ForegroundSample.ets // 前景
| | | |---backgroundSample
| | | | |---BackgroundSample.ets // 背景
| | | |---borderSample
| | | | |---BorderSample.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容器组件 布局，在每个 ListItem 中使用 循环渲染 加载此分类下分类导航数据，底部导航菜单使用 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 实现页面
● 接口参考：@ohos.curves， @ohos.router
■ 显示动画
● 用到全局组件 TitleBar，IntroductionTitle 实现页面
● 接口参考：animateTo
■ 属性动画
● 用到全局组件 TitleBar，IntroductionTitle 实现页面
● 接口参考：animation
■ 路径动画
● 用到全局组件 TitleBar，IntroductionTitle 实现页面
● 接口参考：path
○ 全局方法模块：
■ 弹窗使用全局组件 ShowToast，TitleBar，IntroductionTitle 实现弹窗组件页面
● 使用 getStringArrayData，getStringData 获取数据ResourceDataHandle.ets
相关权限
ohos.permission.GET_BUNDLE_INFO
ohos.permission.GET_BUNDLE_INFO_PRIVILEGED
依赖
不涉及。
约束与限制
1.本示例仅支持标准系统上运行，支持设备：RK3568。
2.本示例仅支持 API10 版本 SDK，版本号：4.0.10.1,镜像版本号：[OpenHarmony_4.0.10.1]
3.本示例涉及使用系统接口，FormComponent 组件相关接口，需要手动替换 Full SDK 才能编译通过，具体操作可参考替换指南。
4.本示例需要使用 DevEco Studio 3.1 Release (Build Version: 3.1.0.500, built on April 28, 2023)才可编译运行。
5.本示例涉及 ohos.permission.GET_BUNDLE_INFO_PRIVILEGED、ohos.permission.REQUIRE_FORM 为 system_basic 级别（相关权限级别可通过权限定义列表 查看），需要配置高权限签名，可参考应用apl等级说明。
6.本示例涉及系统接口，需要配置系统应用签名，可以参考修改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
OpenHarmony应用开发—ArkUI组件集合的更多相关文章
- Android 开发 系统组件集合
常用的TextView.Button.ImageView和几个常用布局就不介绍了,我们介绍一些特别好用但是常常忘记的组件. 标题栏组件 <androidx.appcompat.widget.To ...
- OpenHarmony SystemUI开发记录
背景介绍 最近学习OpenHarmony应用开发, SDK版本是3.2.9.2 Beta4,IDE版本是3.1.0.200.参考官方文档,做了个Demo应用,调试.运行非常顺利.启动应用后,状态栏和导 ...
- iOS开发之组件化架构漫谈
前段时间公司项目打算重构,准确来说应该是按之前的产品逻辑重写一个项目.在重构项目之前涉及到架构选型的问题,我和组里小伙伴一起研究了一下组件化架构,打算将项目重构为组件化架构.当然不是直接拿来照搬,还是 ...
- 使用OC开发phonegp 组件
使用OC开发phonegp 组件 1. 使用oc 对phonegp中的组件近些开发,首先具体的pgonegp跟nativecode之间的一些优劣就不说了,开发phonegp 对应的组件主要就是使用na ...
- 【小程序】小程序开发自定义组件的步骤>>>>>>>>>小程序开发过程中报错：jsEnginScriptError
报错:jsEnginScriptError VM6342: jsEnginScriptError Component is not found in path "component/spac ...
- web前端开发常用组件
web前端开发常用组件 1. 对话框(dialog):jbox(适合对话框等其它功能).colorbox(也很强大,可以弥补jbox图片轮播的落点), 这二者基本能搞定所有对话框的情况 2. ...
- 038——VUE中组件之WEB开发中组件使用场景与定义组件的方式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 在WePY中实现了小程序的组件化开发，组件的所有业务与功能在组件本身实现，组件与组件之间彼此隔离，上述例子在WePY的组件化开发过程中，A组件只会影响到A所绑定的myclick
wepyjs - 小程序组件化开发框架 https://tencent.github.io/wepy/document.html#/?id=%e5%be%ae%e4%bf%a1%e5%b0%8f%e7 ...
- C# 开发COM组件供c++使用
C# 开发COM组件供c++使用 Microsoft在解决和以往的COM和SDK开发技术之间的互操作性(Interoperability)方面做了很多的工作,其中包括COM和.NET对象之间的相互调用 ...
- Java开发工具类集合
Java开发工具类集合 01.MD5加密工具类 import java.security.MessageDigest; import java.security.NoSuchAlgorithmExce ...
随机推荐
- Java JVM——3.运行时数据区概述及线程
运行时数据区概述 在JVM 中的位置 内部划分 当我们通过前面的:类的加载 → 验证 → 准备 → 解析 → 初始化 这几个阶段完成后,执行引擎就会对我们的类进行使用,同时执行引擎将会使用到我们的运行 ...
- Singularity容器
"""参考文档 https://apptainer.org/user-docs/master/build_a_container.html ""&qu ...
- python内置模块argparse的使用
官网文档 https://docs.python.org/3/howto/argparse.html # 简易教程 https://docs.python.org/3/library/argparse ...
- 【Azure APIM】APIM self-host 部署在K8S中，如何更换证书呢？
问题描述 APIM self-host(自建网关)部署在K8S中,如何在本地上传及更换证书呢? 问题解答 如果使用Self-host网关,则不支持使用上传到 APIM的 CA 根证书验证服务器和客户端 ...
- Java --- 多线程 创建线程的方式四： 使用线程池
1 package bytezero.thread2; 2 3 import java.security.Provider; 4 import java.util.concurrent.Executo ...
- 【5分钟】W10 64bit系统本地安装postgresql 11
1.下载 官网下载地址 2.安装 一路默认,有一个选语言的可以选中chinese simple(中文简体). 3.初始化 1)进入bin: cd C:\Program Files\PostgreS ...
- [VueJsDev] 基础知识 - asyncTool.js异步执行工具
[VueJsDev] 目录列表 https://www.cnblogs.com/pengchenggang/p/17037320.html asyncTool.js 异步执行工具 ::: detail ...
- vscode 快捷键更换 ctrl + h 全局搜索 改为 f1 - 个人习惯 - 针对某些跨文件函数不能自动跳转
vscode 快捷键更换 ctrl + h 全局搜索 改为 f1 - 个人习惯 - 针对某些跨文件函数不能自动跳转 原来 f1 换成 ctrl + f1 它一般用 ctrl + shift + p 调 ...
- windows下删除文件时提示“操作无法完成 因为文件已在。。。”解决方案
解决方案:利用"资源监视器",如上图: 具体步骤: win+r,输入perfmon打开资源监视器 或者 右键--Windows 7任务栏--启动任务管理器--性能--资源监视器-- ...
- C++类的访问权限
首先明确一个类的用户有三种: 一类用户:类的成员和友元 二类用户:子类的成员及子类的友元 三类用户:外部的用户代码(通过类的对象或指针) 一个类有三种成员 private:只有一类用户可以访问priv ...