初始ArkUI

一. 什么是ArkUI

ArkUI基于方舟UI框架为应用的UI开发提供了完整的基础设施,UI语法更加简洁,丰富的UI功能(组件、布局、动画以及交互事件),以及实现界面预览工具等,可以支持开发者进行可视化界面开发。

(1)UI的基本概念

UI:可以称为用户界面。开发者可以将应用的用户界面设计为多个功能页面,每个页面进行单独的文件管理。并通过页面由API完成页面间的调度管理如跳转、回退等操作,以实现应用内的功能解耦。

(2)组件的概念

组件:UI框架与显示的最小单位,如列表、网格、按钮、单选框、进度条、文本等。开发者通过多种组件的组合,构建出满足自身应用诉求的完整界面。

二. ArkTS声明式开发范式

基于A人口TS的声明式开发范式的方舟开发框架是一套开发极简、高性能、支持跨设备的UI开发框架,提供了构建应用UI所必需的能力。

(1)Arkts

ArkTS是优选的主力应用开发语言,基于TypeScript(简称TS)生态的基础上做了进一步扩展。扩展能力包含声明式UI描述、自定义组件、动态扩展UI元素、状态管理和渲染控制。状态管理作为基于ArkTS的声明式开发范式的特色,通过功能不同的装饰器给开发者提供了清晰的页面更新渲染流程和管道。状态管理包括UI组件状态和应用程序状态,两者协作可以使开发者完整地构建整个应用的数据更新和UI渲染。

(2)布局

布局是UI的必要元素,它定义了组件在界面中的位置。ArkTS框架提供了多种布局方式,除了基础的线性布局、层叠布局、弹性布局、相对布局、栅格布局外,也提供了相对复杂的列表、宫格、轮播

(3)组件

组件是UI的必要元素,形成了在界面中的样子,由框架直接提供的称为系统组件,由开发者定义的称为自定义组件。系统内置组件包括按钮、单选框、进度条、文本等。开发者可以将系统内置组件组合为自定义组件,通过这种方式将页面组件化为一个个独立的UI单元,实现页面不同单元的独立创建、并发和复用、具有更强的工程性。

(4)页面路由和组件导航

应用可能包含多个页面,可通过页面路由实现页面间的跳转。一个页面内可能存在组件间的导航如典型的分栏,可通过导航组件实现组件间的导航。

(5)图形

方舟开发框架提供了多种类型图片的显示能力和多种自定义绘制的能力。以满足开发者的自定义绘图需求,支持绘制形状、填充颜色,绘制文本,变形与裁剪、嵌入图片等。

(6)动画

动画是UI的重要元素之一。优秀的动画设计能够极大地提升用户体验。框架提供了丰富的动画能力,除了组件内置动画效果外,还包括属性动画、显示动画、自定义转场动画以及动画API等,开发者可以通过封装的物理模型或者调用动画能力API来实现自定义动画轨迹。

(7)交互事件

交互事件是UI和用户交互的必要元素。方舟开发框架提供了多种交互事件,除了触摸事件、鼠标事件、键盘按键事件、焦点事件等通用事件外,还包括基于通用事件进行进一步识别的手势事件,手势事件有单一手势如点击手势、长按手势、拖动手势、捏合手势、旋转手势、滑动手势,以及通过单一手势事件进行组合的组合手势事件。

(8).自定义能力

自定义能力是UI开发框架提供给开发者对UI界面进行开发和定制化的能力。包括:自定组合、自定义扩展、自定义节点和自定义渲染。

三. 布局

布局相关的容器组件可形成对应的布局效果

组件区域(蓝区方块):组件区域表示组件的大小,width、height属性用于设置组件区域的大小。

组件内容区(黄色方块):组件内容区大小为组件区域大小减去组件的border值,组件内容区大小会作为组件内容(或者子组件)进行大小测算时的布局测算限制。

组件内容(绿色方块):组件内容本身占用的大小,比如文本内容占用的大小。组件内容和组件内容区不一定匹配,比如设置了固定的width和height,此时组件内容的大小就是设置的width和height减去padding和border值但文本内容则是通过文本布局引擎测算后得到的大小可能出现文本真实大小小于设置的组件内容区大小当组件内容和组件内容区大小不一致时,align属性生效,定义组件内容在组件内容区的对齐方式,如居中对齐。

组件布局边界(虚线部分):组件通过margin属性设置外边距时,组件布局边界就是组件区域加上margin的大小。

(1)线性布局

线性布局(LinearLayout)是开发中最常用的布局,通过线性容器Row和Column构建。线性布局是其他布局的基础,其子元素在线性方向上(水平方向和垂直方向)依次排列

线性布局的排列方向由所选容器组件决定,Column容器内子元素按照垂直方向排列,Row容器内子元素按照水平方向排列。

        

 (2)线性布局的基本概念

布局容器:具有布局能力的容器组件,可以承载其他元素作为其子元素,布局容器会对其子元素进行尺寸计算和布局排列。

布局子元素:布局容器内部的元素。

主轴:线性布局容器在布局方向上的轴线,子元素默认沿主轴排列。 Row容器主轴为水平方向,Column容器主轴为垂直方向。

Row容器
属性名类型必填说明
justufyContentFlexAlign子组件在水平方向上的对齐格式。默认值:Flex Align.Start
alignItemsVerticalAlign子组件在垂直方向上的对齐格式。默认值:VerticalAlign.Center

Column容器
属性名类型必填说明
justufyContentFlexAlign子组件在垂直方向上的对齐格式。默认值:Flex Align.Start
alignItemsHorizontalAlign子组件在水平方向上的对齐格式。默认值:HorizontalAlign.Center

 

交叉轴:垂直于主轴方向的轴线。 Row容器交叉轴为垂直方向,Column容器交叉轴为水平方向。

间距:布局子组件的间距。可选值为大于等于0 的数字,或者可以转换为数字的字符串。

// 间距Column({space:10}){// 内容}

(3)自适应拉伸

在线性布局下,常用空白填充组件Blank,在容器主轴方向自动填充空白空间,达到自适应拉伸效果。Row和Column作为容器,只需要添加宽高为百分比,当屏幕宽高发生变化时,会产生自适应效果

Column(){Row(){Text('a')Blank()Toggle(type:ToggleType.Switch,isOn:true)}}

(4)自适应缩放

自适应缩放是指子元素随容器尺寸的变化而按照预设的比例自动调整尺寸,适应各种不同大小的设备。在线性布局中,可以使用以下两种方法实现自适应缩放。

父容器尺寸确定时,使用layoutWeight属性设置子元素和兄弟元素在主轴上的权重,忽略元素本身尺寸设置,使它们在任意尺寸的设备下自适应占满剩余空间。

Column(){Row(){}.layoutWeight(1)Row(){}Row(){}Row(){}Row(){}}

(5)自适应延伸

自适应延伸是指在不同尺寸设备下,当页面的内容超出屏幕大小而无法完全显示时,可以通过滚动条进行拖动展示。这种方法适用于线性布局中内容无法一屏展示的场景。通常有以下两种实现方式。

在List中添加滚动条:当List子项过多一屏放不下时,可以将每一项子元素放置在不同的组件中,通过滚动条进行拖动展示。可以通过scrollBar属性设置滚动条的常驻状态,edgeEffect属性设置拖动到内容最末端的回弹效果。

使用Scroll组件:在线性布局中,开发者可以进行垂直方向或者水平方向的布局。当一屏无法完全显示时,可以在Column或Row组件的外层包裹一个可滚动的容器组件Scroll来实现可滑动的线性布局。

List组件

// list@State arr:number[]=[1,2,3,4,5,6,7,8,9]Column(){List(){ForEach(this.arr,(item:number,index:number)=>{ListItem(){Column(){Text(item.toString()).width('90%').height(150).backgroundColor('#333')}}})}.height(100)}

Scroll组件

@State arr:number[]=[1,2,3,4,5,6,7,8,9]Scroll(){Column(){ForEach(this.arr,(item:number,index:number)=>{Column(){Text(item.toString()).width('90%').height(150).backgroundColor('#333')}})}}
.backgroundColor('blue')
.scrollable(ScrollDirection.Vertical) //滚动方向为垂直方向
.scrollable(ScrollDirection.Horizoontal) //滚动方向为水平方向
.scrollBar(BarState.On) // 滚动条常驻显示
.scrollBarColor(Color.Gray) // 滚动条颜色
.scrollBarWidth(10) // 滚动条宽度
.edgeEffect(EdgeEffect.Spring) // 滚动到边沿后回弹

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/476202.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【PCIE常见面试问题-1】

PCIE常见面试问题-1 1 PCIE概述1.1 PCI为何发展开PCIE?1.2 什么是Root Complex(RC)1.3 什么是EP?1.4 什么是Swith1.5 PCIE协议如何组织通信的?1.6 简要介绍一下PCIE的分层结构,为什么需要分层?1.7 PCIE的事务类型有哪些…

用pyspark把kafka主题数据经过etl导入另一个主题中的有关报错

首先看一下我们的示例代码 import os from pyspark.sql import SparkSession import pyspark.sql.functions as F """ ------------------------------------------Description : TODO:SourceFile : etl_stream_kafkaAuthor : zxxDate : 2024/11/…

什么是反向 DNS 查找以及它的作用是什么?

反向DNS查询(rDNS)是一种技术,用于确定与某个IP地址对应的域名。当我们对一个IP地址进行反向DNS查询时,实际上是向域名系统(DNS)的特殊部分请求信息,这部分被称为PTR记录。PTR记录会返回与这个I…

HarmonyOS鸿蒙系统上File文件常用操作

HarmonyOS鸿蒙系统上,file文件常用操作记录 1.创建文件 createFile(fileName: string, content: string): string {// 获取应用文件路径let context getContext(this) as common.UIAbilityContext;let filesDirPath context.filesDir / fileName;// 新建并打开…

音视频pts/dts

现在的视频流有两个非常重要的时间戳,pts和dts,其中pts是显示的时候用,dts在解码的时候用。 pts很好理解,按照pts的顺序以及duration不间断的display就可以了。 dts在解码的时候用,那么这句话怎么理解,解…

输出比较简介

输出比较简介 主要是用来输出PWM波形,这个波形是驱动电机的(智能车和机器人等)必要条件 OC(Output Compare)输出比较,还有IC,全称是Input Capture,意为输入捕获,还有CC…

揭秘AIGC下的数字时代:交互设计的隐秘力量与未来革命

在当今数字化时代,交互设计已经成为我们日常生活中不可或缺的一部分。它不仅仅是关于产品或服务的界面设计,更是关于如何通过这些界面与人进行有效的沟通和互动。本文将探讨交互设计的深层含义、面临的挑战以及其对未来科技发展的影响。 文章来源&#x…

使用node-addon-api实现从c到nodejs模块全流程

目录 1 前言 2 安装nodejs 3 安装开发工具链 3.1 安装node-gyp 3.2 安装编译工具链(C/C 编译器) 4 初始化 Node.js 项目 4.1 创建项目目录 4.2 初始化 package.json 4.3 安装必要的库 5 编写代码 5.1 创建项目结构 5.2 编写动态库代码 5.3 编…

Python3.11.9+selenium,获取图片验证码以及输入验证码数字

Python3.11.9+selenium,获取图片验证码以及输入验证码数字 1、遇到问题:登录或修改密码需要验证码 2、解决办法: 2.1、安装ddddocr pip install ddddocr 2.2、解析验证码函数 import ddddocr def get_capcha_text():#获取验证码图片ele_pic = driver.find_element(By.XPAT…

测试工程师如何在面试中脱颖而出

目录 1.平时工作中是怎么去测的? 2.B/S架构和C/S架构区别 3.B/S架构的系统从哪些点去测? 4.你为什么能够做测试这一行?(根据个人情况分析理解) 5.你认为测试的目的是什么? 6.软件测试的流程&#xff…

css水平居中+垂直居中

display:“flex”,position: “absolute”,top:“50%”,left:“50%”,transform: ‘translate(-50%, -50%)’

Linux 服务器使用指南:从入门到登录

🌟快来参与讨论💬,点赞👍、收藏⭐、分享📤,共创活力社区。 🌟 🚩博主致力于用通俗易懂且不失专业性的文字,讲解计算机领域那些看似枯燥的知识点🚩 目录 一…

99.【C语言】数据结构之二叉树的基本知识

目录 1.树的定义 树是递归定义的 一些细碎的概念 2.树的判断法则 树结点结构的定义 自然想到的定义方法 左孩子右兄弟定义 3.树的应用:文件系统 4.树的特殊形式:二叉树 5.特殊的两类二叉树 满二叉树 完全二叉树 完全二叉树和满二叉树之间的关系 高度为h的完全二叉…

Bug:引入Feign后触发了2次、4次ContextRefreshedEvent

Bug:引入Feign后发现监控onApplication中ContextRefreshedEvent事件触发了2次或者4次。 【原理】在Spring的文档注释中提示到: Event raised when an {code ApplicationContext} gets initialized or refreshed.即当 ApplicationContext 进行初始化或者刷…

Ubuntu20.04从零安装IsaacSim/IsaacLab

Ubuntu20.04从零安装IsaacSim/IsaacLab 电脑硬件配置:安装Isaac sim方案一:pip安装方案二:预构建二进制文件安装1、安装ominiverse2、在ominiverse中安装isaac sim,下载最新的4.2版本 安装Isaac Lab1、IsaacLab环境克隆2、创建con…

低速接口项目之串口Uart开发(二)——FIFO实现串口数据的收发回环测试

本节目录 一、设计思路 二、loop环回模块 三、仿真模块 四、仿真验证 五、上板验证 六、往期文章链接本节内容 一、设计思路 串口数据的收发回环测试,最简单的硬件测试是把Tx和Rx连接在一起,然后上位机进行发送和接收测试,但是需要考虑到串…

算法编程题-排序

算法编程题-排序 比较型排序算法冒泡排序选择排序插入排序希尔排序堆排序快速排序归并排序 非比较型排序算法计数排序基数排序 本文将对七中经典比较型排序算法进行介绍,并且给出golang语言的实现,还包括基数排序、计数排序等非比较型的算法的介绍和实现…

【软考】系统架构设计师-信息系统基础

#信息系统基础核心知识点 信息系统5个基本功能:输入、存储、处理、输出和控制 诺兰模型:信息系统计划的阶段模型,6阶段 初始阶段,传播阶段,控制阶段,集成阶段,数据管理阶段,成熟阶…

【架构】主流企业架构Zachman、ToGAF、FEA、DoDAF介绍

文章目录 前言一、Zachman架构二、ToGAF架构三、FEA架构四、DoDAF 前言 企业架构(Enterprise Architecture,EA)是指企业在信息技术和业务流程方面的整体设计和规划。 最近接触到“企业架构”这个概念,转念一想必定和我们软件架构…

使用低成本的蓝牙HID硬件模拟鼠标和键盘来实现自动化脚本

做过自动化脚本的都知道,现在很多传统的自动化脚本方案几乎都可以被检测,比如基于root,adb等方案。用外置的带有鼠标和键盘功能集的蓝牙HID硬件来直接点击和滑动是非常靠谱的方案,也是未来的趋势所在。 一、使用蓝牙HID硬件的优势…