ArkTS开发系列之UI布局用法的学习认识（2.2.1上）

本篇内容 ArkTS开发系列之UI布局用法的学习认识（2.2.1上）

一、知识储备

1. 什么是ArkUI？

① 为HAP(鸿蒙应用)的ui开发提供了完整的基础设施，包括简洁的UI语法、丰富的ui功能（组件、布局、动画、交互等），以及实时界面预览工具等可以支持开发者进行可视化界面开发。

② ui就是用户界面，我们开发者根据用户实际需求，将组件、动画及交互等合理的组织在一起，呈现给用户可见的界面。

③ 组件就是ui构建时的最小单位、如按钮、文本、列表等

2. 开发范式

① 声明式开发范式：采用Ts声明式ui语法扩展而来的ArkTS语言，从组件、动画和状态管理三个维度提供UI绘制能力

② 类web开发范式：采用经典的Hml、css、Js三段式开发方式。更符合web前端开发者的使用习惯。

③ 使用推荐： 声明式开发范式

• 开发效率： 声明式开发范式，更接近自然语言的编程方式，可以直观的描述ui，无需关心如何实现ui绘制和渲染，开发高效简洁。
• 应用性能：两种开发范式的UI后端引擎和语言运行时是共用的，但是声明式开发范式无需Js框架进行页面dom管理，渲染更新链路更为精简，占用内存更少，应用性能更佳。
• 发展趋势：声明式开发范式后续会作为主推的开发范式持续演进。前途环境市场更好

④ 特点

• 代码简洁：接近自然语义的方式描述ui、不必关心框架如何实现ui绘制和渲染
• 数据驱动ui变化：开发者可以更关注业务逻辑本身
• 声明式ui前后端分层：ui后端采用c++语言构建，提供对应前端的基础组件、布局、交互等；
• 语言编译器和运行时的优化：统一字节码、高效FFI-Foreign Function Interface、 AOT-Ahead OF Time、引擎极小化、 类型优化等
• 生态容易快速推进：借力主流语言生态快速推进、语言相对中立友好，有相应的标准组织可以逐步演进。

3. 核心概念

① ArkTS：HAP应用的主力开发语言，在Ts生态基础上做了扩展。扩展能力包含声明式u描述、自定义组件、动态扩展ui元素、状态管理和渲染控制。

② 布局：定义组件在界面中的位置。ArkUI框架提供了线性布局、层叠布局、弹性布局、相对布局、栅格布局、列表、宫格、轮播等

③组件：ui构建时的最小单位， 分为系统组件（按钮、列表等）和自定义组件(开发者根据需求自己定义)两大类。

④页面路由和组件导航：路由负责实现页面间的跳转，导航组件实现组件间的导航

⑤图形：框架提供了多种类型图片的显示能力和多种自定义绘制的能力，可以绘制形状、颜色、文本、裁剪、合并、嵌入等。

⑥动画：动画可以提升用户体验，框架提供了属性动画、显示动画、自定义转场动画以及动画api。开发可以通过封装物理模型或者调用 api来实现自定义动画效果。

⑦交互事件：框架提供了触摸事件、鼠标事件、键盘按键事件、焦点事件等，此外还有长按、点击、拖动、旋转等手势事件。

⑧声明式ui前端：提供了声明式ui开发范式的基础语言规范、内置基础组件、布局、动效、多种状态管理机制。

⑨ 语言运行时：选用方舟语言运行时，提供了针对ui范式语法的解析能力、跨语言调用支持的能力和ts语言高性能运行环境。

⑩ 声明工后端引擎：后端引擎提供了兼容不同开发范式的ui渲染管线，提供了对应前端的基础组件、布局、动效、交互、状态管理和绘制能力。

⑩ 渲染引擎：提供了高效的绘制能力，将渲染管线收集的渲染指令，绘制到屏幕的能力

⑩ 平台适配层：提供了对系统平台的抽象接口，具备接入不同系统的能力，如系统渲染管线、生命周期调度等。

4. 开发布局

① 线性布局：就是（Row）水平方向或（Column）垂直方向布局。

• 常用函数

build() {
	Column({ space: 20 }) {//组件内组件间距
		Text('init').fontSize(55)
		Blank() // 空白填充组件Blank，在主轴方向自动填空空白空间，达到自适应拉伸效果
		Toggle({ type: ToggleType.Switch, isOn: true})
	}.width('100%')//组件占比屏幕宽度
	.alignItems(HorizontalAlign.Center）//子组件的水平对齐方式，有Start/Center/End三种  VerticalAlign.Top 子组件的垂直方向对方方式 有Top/Center/Bottom三种
	.backgroundColor('rgb(242,242,242)')//背景颜色设置
	.justifyContent(FlexAlign.Center)//子组件在主轴上的排列方式 有Start、Center、End、SpaceBetween、SpaceAround、SpaceEvenly六种
}

build() {
	Scroll(new Scroller()){
		Column(){
			ForEach(this.arr, (item) => {
				Text(item.tostring())
          	}, item => item)
 		}.width('100%')
	}.scrollable(ScrollDirection.Vertical)//垂直滚动//Horizontal为水平方向滚动
	.scrollBar(BarState.On)//显示滚动条
	.scrollBarColor(Color.Gray)//滚动条颜色
	.scrollBarWidth(10)//滚动条宽度
	.edgeEffect(EdgeEffect.Spring)//滚动到边沿后回弹
}

② 层叠布局：就是在屏幕中申请一样区域，用来显示子组件。子组件是叠加在一起显示

• 常用函数

Stack({ alignCotent： Alignment.BottomStart }) {//实现子组件位置的对齐方式，有TopStart/Top/TopEnd/Start/Center/End/BottomStart/Bottom/BottomEnd 九种
	Column() {
		Text(’222222').fontSize(25)
	}.width(100).height(100).backGroundColor(0xff00ff)
	.zIndex(2)//z序控制，zIndex属性值越大，显示层级越高。会显示越上层
	
	Column() {
		Text(’111111').fontSize(25)
	}.width(150).height(150).backGroundColor(0x00ff00).zIndex(1)
	
	Column() {
		Text(’333333').fontSize(25)
	}.width(300).height(300).backGroundColor(0x00ffff)
}.margin({top:200}).width(300).height(300).backgroundColor(0xf7f7f7)

③ 弹性布局：（Flex）功能强大的布局

• 常用函数:

@Entry  
@Component
struct FlexExample {
  build() {
    Column() {
      Column({ space: 5 }) {
        Flex({ direction: FlexDirection.Row, wrap: FlexWrap.NoWrap, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center，alignContent: FlexAlign.Start }) {
        //direction布局方向:Row默认参数，从左至右，RowReverse从右至左，Column垂直方向，从上到下，CloumnReserver从下到上
        //wrap布局换行：NoWrap默认参数，不换行，当子组件总宽度大于父组件时，子组件宽度被挤压；Warp换行；WrapReverse换行，每一行子组件按照主轴反方向排列
        //justifyContent::Start默认参数，延主轴从首至尾，Center主轴方向居中对齐,End延主轴从尾至首，SpaceBetween首尾贴边，其余间距均分,SpaceAround主轴方向均匀分配弹性元素，每个子组件左右外边距相等，SpaceEvenly：首尾也有边距，所有左右边距相等
        //alignItems:交叉轴对齐方式：Auto默认参数，Start，交叉轴方向首部对齐，Center交叉轴方向居中对齐，End交叉轴方向底部对齐，Stretch交叉轴方向拉伸填充，拉伸到容器尺寸，Baseline交叉轴方向文本基线对齐
        //alignContent内容对齐：Start子组件各行与交叉轴起点对齐，Center子组件各行与交叉轴方向居中对齐，End子组件各行与交叉轴终点对齐，Between，子组件首尾行贴边，其余行边距相等， Around子组件左右各边距相等，Evenly子组件首尾有边距，所有左右边距相等
          Text('1').width('30%').height(50).backgroundColor(0xF5DEB3)
          	.flexGrow(2)//设置父容器剩余空间分配权重
          Text('2').width('30%').height(50).backgroundColor(0xD2B48C)
          	.alignSelf(ItemAlign.Baseline)//子组件也可以设置在父容器交叉轴的对齐格式，且优先级更高
          	.flexBasis('auto')//width设置有值时，flexBasic设置无效
          	.flexShrink(3)//当父容器空间不足时，子组件压缩比例
          Text('3').height(50).backgroundColor(0xF5DEB3)
          	.flexBasis('auto')//未设置width且flexBasic设置为auto时，组件宽度为内容自身宽度，设置为100时，那宽度就是100vp
        }
        .height(70)
        .width('90%')
        .backgroundColor(0xAFEEEE)
      }.width('100%').margin({ top: 5 })
    }.width('100%') 
 }
}

④ 相对布局：（RelativeContainer）使用简单很多

• 常用函数

RelativeContainer() {
	Row() 
		.alignRules({
			top: { anchor: '__container__', align: VerticalAlign.Bottom },//相对垂直位置：top上，Center中，Bottom下
			right: { anchor: '__container__', align: HorizontalAlign.End } //相对水平位置：Start左，End右，Center中
			// anchor是锚点指向哪个组件
		})
		.id("id")
		
}

⑤ 栅格布局：(GridRow/GridCol)

• 栅格系统断点 默认有四类

断点名称	取值范围（vp）	设备描述
xs	[0,320]	最小宽度类型
sm	[320,520]	小宽度类型设备
md	[520,840]	中等宽度
lg	[840,+∞]	大宽度类型设备

• 在使用GirdRow栅格组件中， breakpoints自定义修改断点的取值范围，最多支持6个断点，以上四个默认断点加xl（特大宽度类型设备）和xxl（超大宽度类型设备）

• 以下表示启用xs、sm、md、lg、xl 5个断点。

breakpoints: {value: ['320vp', '520vp', '840vp', '1080vp']}

• 常用函数

GridRow({gutter: {x: 20, y: 23}, direction: GridRowDirection.Row, column：{sm:4, md:6}, breakPoints: {value:['200vp','300vp','500vp']}) {//column设置为6栅格为分成6列，不设置默认栅格分成12列，
//当column类型为GridRowColumnOption时，支持下面新六种不同尺寸设备的总列数设置，未设置的小的默认12，未设置的大的，参考最近的大的值
//direction排列方向：Row默认从左至右，RowReserve 从右至左
//子组件间距
	ForeEach(this.listData, (item, index) => {
		GridCol({span: 2, offset: 2, order: 2}){
		//span：占用2列  
		//offset：偏移2列
		//order：元素序号
		//GridColColumnOption与GridRowColumnOption相似
			Row() {
				Text(`${index+1}`)
			}
		}
	})
}

二、效果一览

三、源码剖析