鸿蒙UI(ArkUI-方舟UI框架)
参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/arkts-layout-development-overview-V13
ArkUI简介
ArkUI(方舟UI框架)为应用的UI开发提供了完整的基础设施,包括简洁的UI语法、丰富的UI功能(组件、布局、动画以及交互事件),以及实时界面预览工具等,可以支持开发者进行可视化界面开发。
两种开发范式
- 声明式开发范式
采用基于TypeScript声明式UI语法扩展而来的ArkTS语言,从组件、动画和状态管理三个维度提供UI绘制能力 - 类Web开发范式
采用经典的HML、CSS、JavaScript三段式开发方式,即使用HML标签文件搭建布局、使用CSS文件描述样式、使用JavaScript文件处理逻辑。该范式更符合于Web前端开发者的使用习惯,便于快速将已有的Web应用改造成方舟UI框架应用
UI开发(ArkTS声明式开发范式)
1、概述
基于ArkTS的声明式开发范式的方舟开发框架是一套开发极简、高性能、支持跨设备的UI开发框架,提供了构建应用UI所必需的能力,主要包括:
- ArkTS
- 布局
- 组件
- 页面路由和组件导航
- 图形
- 动画
- 交互事件
- 自定义能力
2、开发流程
学习ArkTS > 开发布局 > 添加组件 > 设置组件导航和页面路由 > 使用文本 > 使用弹窗 > 显示图形 > 使用动画 > 绑定事件 > 使用自定义能力 > 使用镜像能力 > 支持适老化 > 主题设置 > 使用UI上下文接口操作界面 > 使用NDK接口构建UI
3、通用规则
-
默认单位
表示长度的入参单位默认为vp,即入参为number类型、以及Length和Dimension类型中的number单位为vp。 -
异常值处理
输入的参数为异常(undefined,null或无效值)时,处理规则如下:(1)对应参数有默认值,按默认值处理;
(2)对应参数无默认值,该参数对应的属性或接口不生效。
开发布局
1、布局概述
1)布局结构
2)布局元素组成
3)如何选择布局
声明式UI提供了以下10种常见布局,开发者可根据实际应用场景选择合适的布局进行页面开发。
布局 | 应用场景 |
---|---|
线性布局(Row、Column) | 如果布局内子元素超过1个时,且能够以某种方式线性排列时优先考虑此布局 |
层叠布局(Stack) | 组件需要有堆叠效果时优先考虑此布局。层叠布局的堆叠效果不会占用或影响其他同容器内子组件的布局空间。例如Panel作为子组件弹出时将其他组件覆盖更为合理,则优先考虑在外层使用堆叠布局。 |
弹性布局(Flex) | 弹性布局是与线性布局类似的布局方式。区别在于弹性布局默认能够使子组件压缩或拉伸。在子组件需要计算拉伸或压缩比例时优先使用此布局,可使得多个容器内子组件能有更好的视觉上的填充效果。 |
相对布局(RelativeContainer) | 相对布局是在二维空间中的布局方式,不需要遵循线性布局的规则,布局方式更为自由。通过在子组件上设置锚点规则(AlignRules)使子组件能够将自己在横轴、纵轴中的位置与容器或容器内其他子组件的位置对齐。设置的锚点规则可以天然支持子元素压缩、拉伸、堆叠或形成多行效果。在页面元素分布复杂或通过线性布局会使容器嵌套层数过深时推荐使用。 |
栅格布局(GridRow、GridCol) | 栅格是多设备场景下通用的辅助定位工具,可将空间分割为有规律的栅格。栅格不同于网格布局固定的空间划分,可以实现不同设备下不同的布局,空间划分更随心所欲,从而显著降低适配不同屏幕尺寸的设计及开发成本,使得整体设计和开发流程更有秩序和节奏感,同时也保证多设备上应用显示的协调性和一致性,提升用户体验。推荐内容相同但布局不同时使用。 |
媒体查询(@ohos.mediaquery) | 媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。例如根据设备和应用的不同属性信息设计不同的布局,以及屏幕发生动态改变时更新应用的页面布局。 |
列表(List) | 使用列表可以高效地显示结构化、可滚动的信息。在ArkUI中,列表具有垂直和水平布局能力和自适应交叉轴方向上排列个数的布局能力,超出屏幕时可以滚动。列表适合用于呈现同类数据类型或数据类型集,例如图片和文本。 |
网格(Grid) | 网格布局具有较强的页面均分能力、子元素占比控制能力。网格布局可以控制元素所占的网格数量、设置子元素横跨几行或者几列,当网格容器尺寸发生变化时,所有子元素以及间距等比例调整。推荐在需要按照固定比例或者均匀分配空间的布局场景下使用,例如计算器、相册、日历等。 |
轮播(Swiper) | 轮播组件通常用于实现广告轮播、图片预览等。 |
选项卡(Tabs) | 选项卡可以在一个页面内快速实现视图内容的切换,一方面提升查找信息的效率,另一方面精简用户单次获取到的信息量。 |
4)布局位置
position、offset等属性影响了布局容器相对于自身或其他组件的位置。
定位能力 | 使用场景 | 实现方法 |
---|---|---|
绝对定位 | 对于不同尺寸的设备,使用绝对定位的适应性会比较差,在屏幕的适配上有缺陷 | 使用position实现绝对定位,设置元素左上角相对于父容器左上角偏移位置。在布局容器中,设置该属性不影响父容器布局,仅在绘制时进行位置调整。 |
相对定位 | 相对定位不脱离文档流,即原位置依然保留,不影响元素本身的特性,仅相对于原位置进行偏移。 | 使用offset可以实现相对定位,设置元素相对于自身的偏移量。设置该属性,不影响父容器布局,仅在绘制时进行位置调整。 |
5)对子元素的约束
-
拉伸:容器组件尺寸发生变化时,增加或减小的空间全部分配给容器组件内指定区域
-
缩放:子组件的宽高按照预设的比例,随容器组件发生变化,且变化过程中子组件的宽高比不变
-
占比:子组件的宽高按照预设的比例,随祖先容器组件发生变化
-
隐藏:隐藏能力是指容器组件内的子组件,按照其预设的显示优先级,随容器组件尺寸变化显示或隐藏,其中相同显示优先级的子组件同时显示或隐藏
2、构建布局
1)线性布局 (Row/Column)
概述
线性布局(LinearLayout)是开发中最常用的布局,通过线性容器Row和Column构建。线性布局是其他布局的基础,其子元素在线性方向上(水平方向和垂直方向)依次排列。线性布局的排列方向由所选容器组件决定,Column容器内子元素按照垂直方向排列,Row容器内子元素按照水平方向排列。根据不同的排列方向,开发者可选择使用Row或Column容器创建线性布局。
图1 Column(列,竖着走)容器内子元素排列示意图
图2 Row(行,横着走)容器内子元素排列示意图
Column容器内排列方向上的间距
Column({ space: 20 }) {Text('space: 20').fontSize(15).fontColor(Color.Gray).width('90%')Row().width('90%').height(50).backgroundColor(0xF5DEB3)Row().width('90%').height(50).backgroundColor(0xD2B48C)Row().width('90%').height(50).backgroundColor(0xF5DEB3)
}.width('100%')
Row容器内排列方向上的间距
Row({ space: 35 }) {Text('space: 35').fontSize(15).fontColor(Color.Gray)Row().width('10%').height(150).backgroundColor(0xF5DEB3)Row().width('10%').height(150).backgroundColor(0xD2B48C)Row().width('10%').height(150).backgroundColor(0xF5DEB3)
}.width('90%')
相关文章:
鸿蒙UI(ArkUI-方舟UI框架)
参考:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V13/arkts-layout-development-overview-V13 ArkUI简介 ArkUI(方舟UI框架)为应用的UI开发提供了完整的基础设施,包括简洁的UI语法、丰富的UI功能ÿ…...
Linux-蓝牙协议
SPP (Serial Port Profile): 串口协议(SPP)是一个蓝牙配置文件,允许设备通过蓝牙模拟传统的串行端口通信。它通常用于无线串口连接,允许设备如计算机和外设(例如打印机或条形码扫描器)之间进行数据传输。A…...
CES Asia 2025:科技盛宴即将开启,续写辉煌篇章
随着2025年国际消费类电子产品展览会(CES)在美国拉斯维加斯盛大开幕并展现出诸多令人瞩目的发展趋势,亚洲科技界也对即将到来的CES Asia 2025充满期待,一场科技盛宴即将在亚洲大陆续写辉煌。 在刚刚拉开帷幕的CES 2025上ÿ…...
tutorial3.c
这个教程程序展示了如何使用 libxlsxwriter 库向 Excel 文件中写入不同类型的数据,包括字符串、数字和日期。以下是程序的主要步骤和功能: 定义数据结构: 定义了一个 expense 结构体,包含三个成员:item(项…...
C# 获取当前运行路径的6种实用方法
C# 获取当前运行路径的多种方法 在C#中,获取当前运行路径(即程序的工作目录)是常见的需求,尤其在处理文件读写、日志记录和配置文件时。不同的场景可能需要使用不同的方法来获取路径。本文将介绍几种常用的获取当前运行路径的方法…...
龙蜥Linux系统部署docker21.1.3版本
龙蜥系统配置docker环境 更新yum源 更新软件源中的包。 yum update安装底层工具 yum install -y yum-utils device-mapper-persistent-data lvm2添加阿里云仓库 # 添加阿里云的docker镜像仓库 yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/c…...
.NET中的框架和运行环境
在.NET生态系统中,框架和运行环境是两个不同的概念,它们各自扮演着重要的角色。 下面我将分别介绍.NET中的框架和运行环境,并解释它们之间的区别。 .NET 框架(Frameworks) 框架提供了一套预定义的类库、工具和服务&…...
STM32的存储结构
STM32F103 芯片是基于 ARM Cortex-M3 内核的微控制器,它集成了多种类型的存储器,每种存储器都有其特定的作用和存储对象。以下是关于 STM32F103 中 Flash、ROM 和 SRAM 的详细介绍: 1. Flash Memory (闪存) 作用:Flash 是非易失性…...
微信小程序
一、小程序文件结构 1.目录结构 pages文件夹:存放【页面文件夹】,一个【页面文件夹】就是一个页面,存放着小程序页面文件。即pages中的每一个文件夹都存放着一个小程序页面的文件(js、wxml、json、wxss) 页面文件夹…...
《CPython Internals》阅读笔记:p76-p95
《CPython Internals》学习第 5 天,p76-p95 总结,总计 20 页。 一、技术总结 无。 二、英语总结(生词:1) 1.check vi/vt. to exam sth to ensure it is correct, true, or in good condition.示例: (1)After I’d finished …...
HOW - Form 表单 label 和 wrapper 对齐场景
一、背景 在日常使用 表单 时,我们一般有如下布局: 可以通过 Form 表单提供的配置直接设置: <Formform{form}labelCol{{ span: 4 }}wrapperCol{{ span: 20 }}onFinish{handleSubmit}><Form.Itemlabel"输入框"name"…...
Js的回调函数
一、什么是回调函数(Callback)? 回调函数(Callback Function)是指一个函数被作为参数传递给另一个函数,并在特定事件发生或操作完成时执行。 可以通俗地理解为一种“委托”机制。 在JavaScript中࿰…...
FairGuard游戏安全2024年度报告
导 读:2024年,国内游戏市场实际销售收入3257.83亿元,同比增长7.53%,游戏用户规模6.74亿人,同比增长0.94%,市场收入与用户规模双双实现突破,迎来了历史新高点。但游戏黑灰产规模也在迅速扩大&…...
ant-design-vue 1.X 通过id获取a-input组件失败
1.ant-design-vue 1.X 问题描述 当我在a-form组件中,以v-decorator指令绑定表单组件时,无法根据我设置的verify-code-input获取元素 <a-input type"text" id"verify-code-input" class"paIpt":placeholder"$t(…...
JS爬虫实战演练
在这个小红书私信通里面进行一个js的爬虫 文字发送 async function sendChatMessage(content) {const url https://pro.xiaohongshu.com/api/edith/ads/pro/chat/chatline/msg;const params new URLSearchParams({porch_user_id: 677e116404ee000000000001});const messageD…...
JVM vs JDK vs JRE
JVM是Java虚拟机的缩写, 用于实现Java的一次编译,处处运行。 Java代码写成.class后,由本地的虚拟机运行。 JDK(Java Development Kit)是一个功能齐全的 Java 开发工具包,供开发者使用。 JDK包含了JRE。…...
OpenCV相机标定与3D重建(47)从两幅图像中的一组匹配点恢复相机的姿态(旋转和平移)函数recoverPose()的使用
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 从两幅不同相机拍摄的图像中对应的点恢复相对相机旋转和平移,使用手性检查。返回通过该检查的内点数量。 cv::recoverPose 是 OpenCV…...
代码随想录算法训练营day27
代码随想录算法训练营 —day27 文章目录 代码随想录算法训练营前言一、贪心算法理论基础二、455.分发饼干三、376. 摆动序列53. 最大子数组和总结 前言 今天是算法营的第27天,希望自己能够坚持下来! 今日任务: ● 贪心算法理论基础 ● 455.…...
基于华为ENSP的OSPF状态机、工作过程、配置保姆级别详解(2)
本篇技术博文摘要 🌟 基于华为enspOSPF状态机、OSPF工作过程、.OSPF基本配置等保姆级别具体详解步骤;精典图示举例说明、注意点及常见报错问题所对应的解决方法 引言 📘 在这个快速发展的技术时代,与时俱进是每个IT人的必修课。我…...
【数据结构】链表
目录 编辑 1.2链表 1.2.1 链表的特性 1.2.2 单向链表 遍历无头单向链表 遍历有头单向链表 链表尾插法练习 1.2.3 单向链表的函数操作 单向链表的特点: 1.2链表 链表又称单链表、链式存储结构,用于存储逻辑关系为“一对一”的数据。 和顺序表…...
RabbitMQ解决消息积压的方法
目录 减少发送mq的消息体内容 增加消费者数量 批量消费消息 临时队列转移 监控和预警机制 分阶段实施 最后还有一个方法就是开启队列的懒加载 这篇文章总结一下自己知道的解决消息积压得方法。 减少发送mq的消息体内容 像我们没有必要知道一个的中间状态,只需…...
机器学习是?
机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科; 是人工智能(AI)的一个分支,也是AI的核心领域,它专注于开发算法和模型&#…...
jupyter出现“.ipynb appears to have died. It will restart automatically.”解决方法
原因 解决方法:更新jupyter的版本 1.打开anaconda prompt 2、更新jupyter版本 在anaconda prompt输入以下指令 conda update jupyter如图:...
计算机毕业设计PyHive+Hadoop深圳共享单车预测系统 共享单车数据分析可视化大屏 共享单车爬虫 共享单车数据仓库 机器学习 深度学习
温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介:Java领…...
c++开源协程库libgo介绍及使用,srs协程,boost协程 Boost::fiber
https://www.cnblogs.com/qwsdcv/p/9115364.html Boost - 从Coroutine2 到Fiber - 开学五年级了 - 博客园 协程就是由程序员控制跑在线程里的“微线程”。它可以由程序员调度,切换协程时代价小(切换根据实现不同,消耗的CPU周期从几十到几百不等)&#x…...
微服务实现高并发 秒杀系统,前后端实现
一、前端实现 前端项目初始化 首先,我们需要创建一个新的 Vue 3 项目。你可以使用 Vue CLI 来快速搭建项目。 安装 Vue CLI(如果尚未安装) bash npm install -g vue/cli 创建 Vue 项目 bash vue create seckill-frontend cd seckill-f…...
Eureka缓存机制
一、Eureka的CAP特性 Eureka是一个AP系统,它优先保证可用性(A)和分区容错性(P),而不保证强一致性(C)。这种设计使得Eureka在分布式系统中能够应对各种故障和分区情况,保…...
PHP语言的学习路线
PHP语言的学习路线 PHP(Hypertext Preprocessor)是一种广泛使用的开源服务器端脚本语言,尤其适用于Web开发。由于其易学易用、功能强大,PHP成为了许多动态网站和Web应用程序开发的首选语言。随着Web3.0和云计算的兴起,…...
python学opencv|读取图像(二十八)使用cv2.warpAffine()函数平移图像
【1】引言 前序已经对图像操作进行了广泛的学习,包括读取、放大缩小,改变BGR通道值等,相关链接包括且不限于: python学opencv|读取图像-CSDN博客 python学opencv|读取图像(三)放大和缩小图像_python(1)使…...
[Linux]Mysql9.0.1服务端脱机安装配置教程(redhat)
前言 本教程适用于在yum源不可用的LInux主机上安装Mysql的场景。 以redhat系主机做操作示例,debian系主机可参照步骤,将对应的rpm -ivh命令换成dpkg -i。 1. 官网下载安装包 https://dev.mysql.com/downloads/mysql/ 1.1 版本分类 MySQL Enterprise…...
个人 ALL IN ONE 方案搭建方案分享(从硬件到软件)及内网穿透方案
这里只做大概方案分享,每个虚拟机的部署细节滤过。 个人 ALL IN ONE 方案搭建方案分享 本指南将详细介绍如何基于现有硬件搭建一体化家庭/个人服务器解决方案,涵盖从软硬件配置、系统安装到功能实现以及性能优化的全过程。实现集 软路由、旁路由、NAS 网…...
TrustRAG:增强RAG系统鲁棒性与可信度的创新框架
在人工智能飞速发展的今天,大语言模型(LLMs)凭借其强大的语言处理能力在诸多领域大放异彩。检索增强生成(RAG)系统(面向企业RAG(Retrieval Augmented Generation)系统的多维检索框架…...
使用证件照制作软件的常见问题及解决方案
在数字化时代,证件照的制作变得越来越简单。借助各种证件照制作软件,我们可以轻松在家中制作出符合要求的证件照。然而,用户在使用这些软件时,可能会遇到一些常见问题。为了帮助您顺利制作出满意的证件照,我们整理了一…...
通过gradle发布aar或jar携带sources-jar到maven nexus
找了很久,没有找到满意的。终于找到一个好的办法。 gradle7.x适用。比以前的写法简洁。 发布传统的jar工程 比如okhttp,fastjson等项目,纯java工程。 直接创建新文件publish.gradle: apply plugin: maven-publishProperties properties …...
SAP推出云端ERP解决方案,加速零售行业数字化转型
2025年1月9日,SAP发布了一款专为零售行业设计的云端ERP行业解决方案——S/4HANA Cloud Public Edition,进一步推动企业向云端迁移。这款解决方案旨在集中运营数据,整合财务、采购和商品管理流程,以帮助零售企业优化运营效率。 核…...
RK3568 Android 13 内置搜狗输入法小计
问:为什么写? 答:网上搜出来的都试过了,不行!下面直接上代码和注意事项! 首先到这个目录(/RK3568/Rockchip_Android13_SDK_Release/device/rockchip/rk356x/tl3568_evm/preinstall)…...
微服务-Nacos(注册中心)
Nacos Nacos可以看作注册中心配置中心,比Eureka更加强大。 注册中心 在父工程中引入SpringCloudAlibaba的版本依赖 <dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-alibaba-dependencies</artifactId&g…...
【数据结构:前缀树Trie】
目录 前言前缀树介绍和应用一、前缀树的定义前缀树的问题和思考前缀树的映射思想前缀树三大性质 二.前缀树节点结构三. 前缀树接口介绍和实现四个接口API1. insert(String word)2. search(String word)3. startsWith(String pre)4. delete(String word) API实现1. 查询操作sear…...
如何让QPS提升20倍
一、什么是QPS QPS,全称Queries Per Second,即每秒查询率,是用于衡量信息检索系统(例如搜索引擎或数据库)或请求-响应系统(如Web服务器)每秒能够处理的请求数或查询次数的一个性能指标。以下是…...
时间复杂度简介
定义 时间复杂度是用来衡量算法运行时间随着输入规模增长而增长的量级。简单来说,它描述了算法执行时间与数据规模之间的关系。我们通常用大O符号( O O O)来表示时间复杂度。例如,对于一个简单的加法运算,它的执行时间…...
记一次sealos部署k8s集群之delete了第一台master如何恢复
记一次sealos部署k8s集群之delete了第一台master如何恢复 一、背景描述 使用sealos部署了一套K8S集群 master信息:172.27.100.1、172.27.100.2、172.27.100.3 node信息:172.27.100.4、172.27.100.5 sealos安装在172.27.100.1节点,根目录下/root/.sealos/文件还在! [root…...
【json】
JSON JSON是一种轻量级的,按照指定的格式去组织和封装数据的数据交互格式。 本质上是一个带有特定格式的字符串(py打印json时认定为str类型) 在各个编程语言中流通的数据格式,负责不同编程语言中的数据传递和交互,类似于计算机普通话 python与json关系及相互转换…...
TypeScript语言的并发编程
TypeScript语言的并发编程 引言 随着现代应用程序的复杂性不断增加,性能和用户体验的重要性显得尤为突出。在这种背景下,并发编程应运而生,成为提升应用程序效率的重要手段。在JavaScript及其超集TypeScript中,尽管语言本身是单…...
左值引用(Lvalue Reference)和右值引用(Rvalue Reference)详解
左值引用(Lvalue Reference)和右值引用(Rvalue Reference)详解 文章目录 左值引用(Lvalue Reference)和右值引用(Rvalue Reference)详解1. 什么是左值和右值?左值&#x…...
音视频入门基础:RTP专题(1)——RTP官方文档下载
一、引言 实时传输协议(Real-time Transport Protocol,简写RTP)是一个网络传输协议,由IETF的多媒体传输工作小组1996年在《RFC 1889》中公布的。 RTP作为因特网标准在《RFC 3550》有详细说明。而《RFC 3551》详细描述了使用最小…...
【Flutter】使用ScrollController配合EasyRefresh实现列表预加载:在还未滑动到底部时加载下一页数据
需求/背景 在我们的业务场景中,列表的加载使用easy_refresh组件: https://pub.dev/packages/easy_refresh 大概效果是往上滑动到一定的offset会触发一个上滑加载,可以触发一些网络请求拉取列表后面的数据来展示。 这种模式一般在一页翻完…...
js实现md5加密
要在JavaScript中实现MD5加密并截取特定位置的字符,你可以使用像crypto-js这样的库。首先,你需要确保你的项目中包含了crypto-js库。如果你是在浏览器环境中,可以通过CDN引入;如果是在Node.js环境中,可以通过npm安装。…...
[java基础-集合篇]LinkedList源码粗析
LinkedList 的数据结构 实现List、Deque 接口,基于 双向链表实现的列表。与基于数组的 ArrayList 不同,基于链表的LinkedList 允许在列表的任何位置快速地插入和删除元素。 Java中LinkedList实现了Deque,它提供了 add, offer, remove, poll, …...
【Rust自学】11.1. 编写和运行测试
喜欢的话别忘了点赞、收藏加关注哦,对接下来的教程有兴趣的可以关注专栏。谢谢喵!(・ω・) 11.1.1. 什么是测试 在Rust里一个测试就是一个函数,它被用于验证非测试代码的功能是否和预期一致。 在一个测试的函数体里通…...
移动端屏幕分辨率rem,less
谷歌模拟器:能直接看到移动端效果 屏幕分辨率 右键电脑桌面 ,点击显示设置 PC端是逻辑分辨率,移动端代码也是参考逻辑分辨率 网页端宽度和逻辑分辨率尺寸相同 手机屏幕尺寸不同,网页宽度均为 100% 所以就需要添加视口标签&#x…...