初学鸿蒙OS之JS-UI框架中提供了哪些组件

简介: 初学鸿蒙OS之JS-UI框架中提供了哪些组件

写在前面


上篇我们介绍了鸿蒙OS提供了哪些UI框架,而且根据我自身的情况,也选择了JS-UI框架,其实都是差不多的,该有的组件都有,就是不同方式去实现而已,大家也可以去看看其他UI框架。


介绍一下鸿蒙OS中JS-UI框架的组件分类


迄今为止,鸿蒙OS,JS-UI框架一共提供了六大类组件,分别是容器组件、基础组件、媒体组件、画布组件、栅格组件、svg组件。


下面分别与大家说一下这几类组件中提供的功能。


容器组件:


容器组件中提供了一些关键性的组件,比如list、form、div、tabs等一系列的容器类组件,如果你使用过HTML,那么理解这些并不难。


基础组件:


基础组件,也是我们最熟悉的组件,比如input、select、span、options、button等等等,都是属于基础组件,这些也是我们真正与内容相结合的组件。


媒体组件:


媒体组件就比较少了,只有video、camera两种组件,这个后期我们细说吧,这类组件不一定所有人都用过,只有看到效果才知道两者具体有哪些区别。


画布组件:


画布组件,canvas,够熟悉吧,后端开发人员尽管可能使用少些,但也是有过一些认知的。


栅格组件:


栅格组件,鸿蒙OS中提供的也不是很多种,就只有grid-container、grid-row、grid-col三种,分别代表着栅格容器,栅格列,栅格行。


SVG组件:


SVG组件,这个种类就多了,这个我也了解不多,后期也需要精进恶补一下才行。


总结


JS-UI框架中,提供的这些组件,已经足以让我们进行一些基础的开发了,然而,为了能在更复杂的场景中去使用,鸿蒙OS还提供了自定义组件,可以让我们去自行实现一些组件。


这点能让我们在开发过程中更加灵活,随着鸿蒙OS的开发人员越来越多,相信陆续的也会有很多人贡献自己写的自定义组件的。


相关文章
|
传感器 人工智能 物联网
HarmonyOS NEXT~鸿蒙操作系统功耗优化特性深度解析
本文深入解析了华为鸿蒙(HarmonyOS)操作系统的功耗优化特性,涵盖低功耗设计原理、核心技术及实际应用效果。通过与Android对比,展现其在待机功耗、CPU调度效率和内存占用上的优势。文章重点阐述分布式任务调度、微内核架构及智能感知技术,并针对智能穿戴、物联网和智能手机等场景优化进行分析,同时为开发者提供优化建议。未来,鸿蒙将探索AI预测性管理等新技术,进一步提升能效表现。
2777 30
|
开发者 容器
44.[HarmonyOS NEXT RelativeContainer案例一] 掌握组件锚点布局:打造灵活精准的UI定位系统
在HarmonyOS NEXT的UI开发中,精确控制组件位置是构建复杂界面的关键。RelativeContainer作为一种强大的布局容器,通过锚点系统提供了精确定位能力,使开发者能够创建出灵活且精准的UI布局。本教程将详细讲解如何使用RelativeContainer的锚点布局功能,帮助你掌握这一核心技术。
412 4
|
设计模式 缓存 容器
06.HarmonyOS Next UI进阶:Text组件与视觉样式完全指南
在HarmonyOS Next应用开发中,Text组件是最基础也是最常用的UI元素之一。它不仅用于显示文本内容,还可以通过丰富的样式属性实现各种视觉效果。掌握Text组件的样式设置,是构建精美UI界面的基础技能。
581 1
|
移动开发 前端开发 JavaScript
鸿蒙NEXT时代你所不知道的全平台跨端框架:CMP、Kuikly、Lynx、uni-app x等
本篇基于当前各大活跃的跨端框架的现状,对比当前它们的情况和未来的可能,帮助你在选择框架时更好理解它们的特点和差异。
1309 0
|
11月前
|
JSON 自然语言处理 数据格式
使用Tabs选项卡组件快速搭建鸿蒙APP框架
ArkUI提供了很多布局组件,其中Tabs选项卡组件可以用于快速搭建鸿蒙APP框架,本文通过案例研究Tabs构建鸿蒙原生应用框架的方法和步骤。
672 5
使用Tabs选项卡组件快速搭建鸿蒙APP框架
|
移动开发 网络协议 小程序
鸿蒙NEXT即时通讯/IM系统RinbowTalk v2.4版发布,基于MobileIMSDK框架、ArkTS编写
RainbowTalk是一套基于开源即时通讯讯IM框架 MobileIMSDK 的产品级鸿蒙NEXT端IM系统。纯ArkTS编写、全新开发,没有套壳、也没走捷径,每一行代码都够“纯血”。与姊妹产品RainbowChat和RainbowChat-Web 技术同源,历经考验。
449 1
|
11月前
|
Linux Go iOS开发
IDA 9.2 发布:Golang 改进、新 UI 组件、类型解析等
IDA Pro 9.2 (macOS, Linux, Windows) - 强大的反汇编程序、反编译器和多功能调试器
1655 0
|
Web App开发 前端开发 JavaScript
Element UI框架中自定义input组件的placeholder样式。
确保这些样式在你的应用程序CSS文件中定义,且该文件已正确加载到项目中。通过以上方法,可以控制Element UI组件中input的placeholder样式,使其满足特定的设计要求。这些更改都是基于CSS伪元素进行的,因此并不会对DOM结构产生改变,保持了原有结构的简洁和高效。
951 12
|
移动开发 开发者
仓颉开发语言入门教程:常见UI组件介绍和一些问题踩坑
仓颉开发语言即将发布一周年,虽已有知名App应用,但教程稀缺且官网文档不够完善。幽蓝君推出系列教程,从零开始系统讲解移动开发。本期介绍常用UI组件:按钮、文本、图片、输入框与搜索框的使用方法及注意事项,帮助开发者快速上手仓颉语言。

热门文章

最新文章

推荐镜像

更多