初识ArkUI
ArkUI简介:ArkUI（方舟UI框架）为应用的UI开发提供了完备的基础设施，包罗简洁的UI语法、丰富的UI功能（组件、布局、动画以及交互变乱），以及实时界面预览工具等，可以支持开发者举行可视化界面开发。
根本概念 UI： 即用户界面。开发者可以将应用的用户界面设计为多个功能页面，每个页面举行单独的文件管理，并通过页面路由API完成页面间的调度管理如跳转、回退等操作，以实现应用内的功能解耦。
组件： UI构建与体现的最小单元，如列表、网格、按钮、单选框、进度条、文本等。开发者通过多种组件的组合，构建出满足自身应用诉求的完备界面。
ArkUI简介1.0
两种开发范式 针对差别的应用场景及技能背景，方舟UI框架提供了两种开发范式，分别是基于ArkTS的声明式开发范式（简称“声明式开发范式”）和兼容JS的类Web开发范式（简称“类Web开发范式”）。
声明式开发范式：采取基于TypeScript声明式UI语法扩展而来的ArkTS语言，从组件、动画和状态管理三个维度提供UI绘制本领。
类Web开发范式：采取经典的HML、CSS、JavaScript三段式开发方式，即使用HML标签文件搭建布局、使用CSS文件形貌样式、使用JavaScript文件处置惩罚逻辑。该范式更符合于Web前端开发者的使用习惯，便于快速将已有的Web应用改造成方舟UI框架应用
ArkUI简介1.1
在开发一款新应用时，推荐采取声明式开发范式来构建UI，重要基于以下几点考虑：
开发效率： 声明式开发范式更靠近自然语义的编程方式，开发者可以直观地形貌UI，无需关心如何实现UI绘制和渲染，开发高效简洁。
应用性能： 如下图所示，两种开发范式的UI后端引擎和语言运行时是共用的，但是相比类Web开发范式，声明式开发范式无需JS框架举行页面DOM管理，渲染更新链路更为精简，占用内存更少，应用性能更佳。
发展趋势：声明式开发范式后续会作为主推的开发范式持续演进，为开发者提供更丰富、更强盛的本领。
https://i-blog.csdnimg.cn/direct/bb06a232b1294acbb82776e693be7fb7.png
ArkUI简介1.2
差别应用范例支持的开发范式 根据所选用应用模子（Stage模子、FA模子）和页面形态（应用或服务的普通页面、卡片）的差别，对应支持的UI开发范式也有所差异，详见下表。
https://i-blog.csdnimg.cn/direct/2b8ccc3e146e49b0a4b46cb621e41d5b.png
ArkUI简介1.3
ArkTS声明式开发范式 基于ArkTS的声明式开发范式的方舟开发框架是一套开发极简、高性能、支持跨设备的UI开发框架，提供了构建应用UI所必需的本领
ArkTS ArkTS是优选的主力应用开发语言，围绕应用开发在TypeScript（简称TS）生态基础上做了进一步扩展。扩展本领包含声明式UI形貌、自界说组件、动态扩展UI元素、状态管理和渲染控制。状态管理作为基于ArkTS的声明式开发范式的特色，通过功能差别的装饰器给开发者提供了清晰的页面更新渲染流程和管道。状态管理包罗UI组件状态和应用程序状态，两者协作可以使开发者完备地构建整个应用的数据更新和UI渲染。ArkTS语言的基础知识请参考初识ArkTS语言。
布局 布局是UI的必要元素，它界说了组件在界面中的位置。ArkUI框架提供了多种布局方式，除了基础的线性布局、层叠布局、弹性布局、相对布局、栅格布局外，也提供了相对复杂的列表、宫格、轮播。
组件 组件是UI的必要元素，形成了在界面中的样子，由框架直接提供的称为体系组件，由开发者界说的称为自界说组件。体系内置组件包罗按钮、单选框、进度条、文本等。开发者可以通过链式调用的方式设置体系内置组件的渲染效果。开发者可以将体系内置组件组合为自界说组件，通过这种方式将页面组件化为一个个独立的UI单元，实现页面差别单元的独立创建、开发和复用，具有更强的工程性。
页面路由和组件导航 应用大概包含多个页面，可通过页面路由实现页面间的跳转。一个页面内大概存在组件间的导航如典型的分栏，可通过导航组件实现组件间的导航。
ArkUI简介1.4
图形 方舟开发框架提供了多种范例图片的体现本领和多种自界说绘制的本领，以满足开发者的自界说绘图需求，支持绘制形状、填充颜色、绘制文本、变形与裁剪、嵌入图片等。
动画 动画是UI的重要元素之一。良好的动画设计可以或许极大地提升用户体验，框架提供了丰富的动画本领，除了组件内置动画效果外，还包罗属性动画、显式动画、自界说转场动画以及动画API等，开发者可以通过封装的物理模子或者调用动画本领API来实现自界说动画轨迹。
交互变乱 交互变乱是UI和用户交互的必要元素。方舟开发框架提供了多种交互变乱，除了触摸变乱、鼠标变乱、键盘按键变乱、核心变乱等通用变乱外，还包罗基于通用变乱举行进一步识别的手势变乱。手势变乱有单一手势如点击手势、长按手势、拖动手势、捏合手势、旋转手势、滑动手势，以及通过单一手势变乱举行组合的组合手势变乱。
自界说本领 自界说本领是UI开发框架提供给开发者对UI界面举行开发和定制化的本领。包罗：自定组合、自界说扩展、自界说节点和自界说渲染。
ArkUI简介1.5
特点
开发效率高，开发体验好 代码简洁：通过靠近自然语义的方式形貌UI，不必关心框架如何实现UI绘制和渲染。 数据驱动UI变化：让开发者更专注自身业务逻辑的处置惩罚。当UI发生变化时，开发者无需编写在差别的UI之间举行切换的UI代码， 开发人员仅需要编写引起界面变化的数据，具体UI如何变化交给框架。 开发体验好：界面也是代码，让开发者的编程体验得到提升。
性能优越 声明式UI前端和UI后端分层：UI后端采取C++语言构建，提供对应前端的基础组件、布局、动效、交互变乱、组件状态管理和渲染管线。 语言编译器和运行时的优化：同一字节码、高效FFI-Foreign Function Interface、AOT-Ahead Of Time、引擎极小化、范例优化等。 生态轻易快速推进 可以或许借力主流语言生态快速推进，语言相对中立友好，有相应的标准组织可以逐步演进
ArkUI简介1.6
整体架构
声明式UI前端
提供了UI开发范式的基础语言规范，并提供内置的UI组件、布局和动画，提供了多种状态管理机制，为应用开发者提供一系列接口支持。
语言运行时 选用方舟语言运行时，提供了针对UI范式语法的解析本领、跨语言调用支持的本领和TS语言高性能运行环境。
声明式UI后端引擎 后端引擎提供了兼容差别开发范式的UI渲染管线，提供多种基础组件、布局计算、动效、交互变乱，提供了状态管理和绘制本领。
渲染引擎 提供了高效的绘制本领，将渲染管线网络的渲染指令，绘制到屏幕的本领。
平台适配层 提供了对体系平台的抽象接口，具备接入差别体系的本领，如体系渲染管线、生命周期调度等。
https://i-blog.csdnimg.cn/direct/b2470f9f44a248c984fd92c5f240a81e.png
布局概述
组件按照布局的要求依次排列，构成应用的页面。在声明式UI中，全部的页面都是由自界说组件构成，开发者可以根据自己的需求，选择合适的布局举行页面开发。
常用布局
https://i-blog.csdnimg.cn/direct/9050cb2e2b1b4ef9a837c71c98fee7f6.png
为实现上述效果，开发者需要在页面中声明对应的元素。其中，Page表示页面的根节点，Column/Row等元素为体系组件。针对差别的页面结构，ArkUI提供了差别的布局组件来帮助开发者实现对应布局的效果，比方Row用于实现线性布局。
布局元素的构成
布局相干的容器组件可形成对应的布局效果 组件区域（蓝区方块）：组件区域表示组件的大小，width、height属性用于设置组件区域的大小。 组件内容区（黄色方块）：组件内容区大小为组件区域大小减去组件的border值，组件内容区大小会作为组件内容（或者子组件）举行大小测算时的布局测算限制。 组件内容（绿色方块）：组件内容本身占用的大小，好比文本内容占用的大小。组件内容和组件内容区不一定匹配，好比设置了固定的width和height，此时组件内容的大小就是设置的width和height减去padding和border值，但文本内容则是通过文本布局引擎测算后得到的大小，大概出现文本真实大小小于设置的组件内容区大小。当组件内容和组件内容区大小不划一时，align属性生效，界说组件内容在组件内容区的对齐方式，如居中对齐。 组件布局界限（虚线部分）：组件通过margin属性设置外边距时，组件布局界限就是组件区域加上margin的大小。
https://i-blog.csdnimg.cn/direct/75463559400c40a3a7d499fd3e1ebd0d.png
线性布局
线性布局（LinearLayout）是开发中最常用的布局，通过线性容器Row和Column构建。线性布局是其他布局的基础，其子元素在线性方向上（水平方向和垂直方向）依次排列。 线性布局的排列方向由所选容器组件决定，Column容器内子元素按照垂直方向排列，Row容器内子元素按照水平方向排列。
根本概念
布局容器：具有布局本领的容器组件，可以承载其他元素作为其子元素，布局容器会对其子元素举行尺寸计算和布局排列。 布局子元素：布局容器内部的元素。 主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。 Row容器主轴为水平方向，Column容器主轴为垂直方向。 交织轴：垂直于主轴方向的轴线。 Row容器交织轴为垂直方向，Column容器交织轴为水平方向。 间距：布局子元素的间距。
布局子元素在排列方向上的间距
在布局容器内，可以通过space属性设置排列方向上子元素的间距，使各子元素在排列方向上有等间距效果.
build() {
Column({space:10}) {
Row({space:20}){
Column().width(40).height(40).backgroundColor(Color.Gray)
Column().width(40).height(40).backgroundColor(Color.Gray)
Column().width(40).height(40).backgroundColor(Color.Gray)
Column().width(40).height(40).backgroundColor(Color.Gray)
}
.width('90%')
.height(60)
.border({color:Color.Red,width:1,style:BorderStyle.Solid})
Row({space:100}){
Column().width(40).height(40).backgroundColor(Color.Pink)
Column().width(40).height(40).backgroundColor(Color.Pink)
Column().width(40).height(40).backgroundColor(Color.Pink)
Column().width(40).height(40).backgroundColor(Color.Pink)
}
.width('90%')
.height(60)
.border({color:Color.Red,width:1,style:BorderStyle.Solid})
.justifyContent(FlexAlign.SpaceBetween)
Row(){
Column().width(40).height(40).backgroundColor(Color.Pink)
Column().width(40).height(40).backgroundColor(Color.Pink)
Column().width(40).height(40).backgroundColor(Color.Pink)
Column().width(40).height(40).backgroundColor(Color.Pink)
}
.width('90%')
.height(60)
.border({color:Color.Red,width:1,style:BorderStyle.Solid})
.justifyContent(FlexAlign.SpaceEvenly)//水平对齐
.alignItems(VerticalAlign.Top)//垂直对齐
.layoutWeight(2)
Row(){
Text('你好')
//填充空白
Blank().color(`red`)
//组件提供勾选框样式、状态按钮样式及开关样式。
Toggle({type:ToggleType.Switch,isOn:true})
}
.width('90%')
.height(60)
.border({color:Color.Red,width:1,style:BorderStyle.Solid})
.layoutWeight(2)
Row(){
Column().width(40).height(40).backgroundColor('red').layoutWeight(1)
Column().width(40).height(40).backgroundColor('black').layoutWeight(1)
Column().width(40).height(40).backgroundColor('green').layoutWeight(1)
Column().width(40).height(40).backgroundColor('blue').layoutWeight(1)
}
.width('90%')
.height(60)
.border({color:Color.Red,width:1,style:BorderStyle.Solid})
.layoutWeight(1)
}
.height('100%')
.width('100%')
.border({color:Color.Blue,width:1,style:BorderStyle.Dotted})
.justifyContent(FlexAlign.Start)//主流对齐方式
.alignItems(HorizontalAlign.Start)//侧轴对其
}
} 滚动条
@Entry
@Component
struct ScrollPage {
@State message: string = 'Hello World';
@State nums:number[]=
build() {
Scroll() {
Column({space:10}){
ForEach(this.nums,(n:number,i)=>{
Row(){
Text(n.toString())
}.height(100)
.width('90%')
.backgroundColor('gray')
.justifyContent(FlexAlign.Center)
.borderRadius(10)
})
}.width('100%')
}
.height('100%')
.width('100%')
.scrollable(ScrollDirection.Vertical)
.scrollBar(BarState.Auto)//开关滚动条
.scrollBarColor('red')//滚动条的颜色
.scrollBarWidth(5)
}
}
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]