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

最新推荐文章于 2025-03-28 14:38:07 发布
原创 最新推荐文章于 2025-03-28 14:38:07 发布 · 1.3k 阅读 · 25 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#开发语言 #harmonyos #华为 #鸿蒙 #鸿蒙开发 #udp #android

介绍

本示例为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
最低0.47元/天 解锁文章
HarmonyOS（鸿蒙）ArkUI组件
小炫风技术旅行
03-17 985
方舟开发框架（简称ArkUI）为HarmonyOS应用的UI开发提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行可视化界面开发。一:Image图片的数据源，支持本地图片和网络图片属性名称参数类型描述altstring |加载时显示的占位图，支持本地图片（png、jpg、bmp、svg和gif类型），不支持网络图片。默认值：null从API version 9开始，该接口支持在ArkTS卡片中使用。
第五篇【传奇开心果短博文系列】鸿蒙开发技术点案例示例：ArkUI 组件库常用布局方式
jackchuanqi的博客
01-26 1389
ArkUI 是 ArkTS 框架中的一个UI组件库，提供了多种布局方式来帮助开发者构建灵活和美观的界面。以下是 ArkUI 中常用的布局方式：Flex 布局：ArkUI 的 Flex 布局使用 FlexContainer 和 FlexItem 组件来实现。FlexContainer 用于创建一个容器，其中的子元素按照水平或垂直方向排列，并根据设置的比例自动调整大小。FlexItem 用于定义 FlexContainer 中的子元素，可以设置元素的大小、对齐方式和伸缩性等属性。
鸿蒙全量源代码在线阅读
weixin_40870382的博客
11-28 4288
OpenHarmony 源代码 阅读利器 全量代码一网打进 在线阅读 快速搜索 在线比较
鸿蒙4.0开发笔记之DevEco Studio如何使用低代码开发模板进行开发的详细流程（六）
Viewinfinitely的博客
11-25 6863
鸿蒙HarmonyOS低代码开发方式，具有丰富的UI界面编辑功能，通过可视化界面开发方式快速构建布局，可有效降低用户的时间成本和提升用户构建UI界面的效率。
鸿蒙开发(四)-低代码开发
热门推荐
赵航的博客
03-11 2万+
本文主要介绍下鸿蒙下的低代码开发。鸿蒙低代码是指在鸿蒙操作系统进行应用开发时，采用简化开发流程和减少编码量的方式来提高开发效率。
OpenHarmony应用开发—ArkUI组件集合
OpenHarmony_dev的博客
09-22 1027
使用全局组件ShowToast,TitleBar,IntroductionTitle实现按钮，时间选择器，单选按钮，选择菜单，滑动条，切换按钮，勾选框，文本选择器，时间选择器，计数器，评分条组件功能。使用全局组件TitleBar，AttributeModificationTool实现二维码，进度条，跑马灯，文字计时器，文字时钟，仪表盘，数据面板组件功能。若不存在三级导航，则跳转至详情页面。使用全局组件TitleBar实现标记，滚动条，下拉刷新，弹出面板，字母索引条组件功能。
【鸿蒙开发示例代码】云开发服务
weixin_44349071的博客
08-19 2273
本示例展示了使用CloudFoundationKit提供的云函数、云存储、云数据库能力的方法，包含：1.云函数的call函数调用功能。2.云存储的上传下载删除功能。3.云数据库的增删改查功能。需要使用@kit.CloudFoundationKit。
OpenHarmony开发指南：NDK开发
DMZDAMS的博客
06-21 1299
Native API是OpenHarmony SDK上提供的一组native开发接口与工具集合（也称为NDK）
鸿蒙5.0开发：ArkUI组件（List）
AyomQAQ的博客
10-11 1052
列表是一种非常实用的容器，适用于呈现各种类型的数据集合...........
鸿蒙next开发：ArkUI组件（List）
最新发布
Aym88的博客
03-28 2032
列表是一种非常有用且功能强大的容器，它常用于呈现同类型或多类型数据集合........
ArkUI组件
m0_56308072的博客
12-09 2774
方舟开发框架（简称ArkUI）为HarmonyOS应用的UI开发提供了完整的基础设施，包括简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互事件），以及实时界面预览工具等，可以支持开发者进行可视化界面开发。ArkUI提供了非常多的组件供开发者使用，我们在使用时直接去查看官方文档即可。
鸿蒙应用开发例子程序java
10-18
鸿蒙应用开发例子程序，一个简单的入门例子，通过xml布局，java代码开发。详细说明请看https://blog.youkuaiyun.com/xgw1010/article/details/109107834
ArkUI 组件库概述
qq_40698086的博客
02-08 845
ArkUI是HarmonyOS应用开发的核心框架之一，旨在简化UI开发过程。它提供了丰富的预定义组件，如Button、Text、Image等，让开发者可以快速搭建应用程序的界面。此外，ArkUI还支持声明式编程范式，使得代码更加简洁易读，同时提升了开发效率。除了官方提供的组件外，ArkUI还鼓励开发者根据自己的需求创建自定义组件。自定义组件可以帮助开发者复用代码、提高开发速度并保持界面的一致性。通过组合现有的基础组件，开发者可以构建出复杂且独特的用户界面元素。```java。
鸿蒙开发超好用的 UI 组件和工具类库 BasicLibrary
威哥爱编程，优快云 博客专家、全栈领域新星创作者、华为 HDE，愿交天下 IT 技术爱好者
10-21 1650
大家好，我是 V 哥。你在学习HarmonyOS NEXT 开发吗，今天 V 哥给你推荐一款超好用的三方库BasicLibrary，BasicLibrary 是一个基于 API 11 封装的基本库，旨在提升鸿蒙开发效率。它包含了一些常用的 UI 组件和实用工具类，未来计划将其打造成一个通用的 UI 组件和基本工具组件库。
【梳理贴】鸿蒙HarmonyOS开发示例代码（七）——基本功能
weixin_44349071的博客
08-19 361
本章主要梳理手机基础功能开发相关示例代码。
HarmonyOS ArkUI--基础组件
qq_44761778的博客
06-02 1416
组件（Component）是界面搭建与显示的最小单位，HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多样的UI组件，我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。组件根据功能可以分为以下五大类：基础组件、容器组件、媒体组件、绘制组件、画布组件。其中基础组件是视图层的基本组成单元，包括Text、Image、TextInput、Button、LoadingProgress等，例如下面这个常用的登录界面就是由这些基础组件组合而成。
鸿蒙os编码_如何看待鸿蒙OS代码示例?
weixin_32257101的博客
12-24 336
首先，DependentLayout.LayoutConfig xxx = new DependentLayout.LayoutConfig(xxx)这是啥？？原谅我Java写的不多，不过我觉得这句代码不应该是LayoutConfig xxx = new DependentLayout.LayoutConfig(xxx)吗？类型名有DependentLayout.LayoutConfig这样调用的...
ArkUI 组件
DN三叶草的博客
12-03 2323
组件（Component）是界面搭建与显示的最小单位，HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多样的UI组件，我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。组件根据功能可以分为以下五大类：基础组件、容器组件、媒体组件、绘制组件、画布组件。在ArkUI中，还支持多种布局方式，如Flex布局、Grid布局等。同时，为了提升用户体验，ArkUI还提供了丰富的动画效果和自定义动画能力。此外，ArkUI还支持多种绘制能力，以满足开发者绘制自定义形状的需求，支持图形绘制、颜色填充、文本绘制
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值