初识ArkUI

初识ArkUI

ArkUI简介

ArkUI（方舟UI框架）为应用的UI开辟提供了完备的根本办法，包罗轻便的UI语法、丰富的UI功能（组件、结构、动画以及交互变乱），以及实时界面预览工具等，可以支持开辟者举行可视化界面开辟。根本概念UI： 即用户界面。开辟者可以将应用的用户界面筹划为多个功能页面，每个页面举行单独的文件管理，并通过页面路由API完成页面间的调治管理如跳转、回退等操纵，以实现应用内的功能解耦。组件： UI构建与表现的最小单元，如列表、网格、按钮、单选框、进度条、文本等。开辟者通过多种组件的组合，构建出满足自身应用诉求的完备界面
两种开辟范式针对差异的应用场景及技能配景，方舟UI框架提供了两种开辟范式，分别是基于ArkTS的声明式开辟范式（简称“声明式开辟范式”）和兼容JS的类Web开辟范式（简称“类Web开辟范式”）。声明式开辟范式：接纳基于TypeScript声明式UI语法扩展而来的ArkTS语言，从组件、动画和状态管理三个维度提供UI绘制本领。类Web开辟范式：接纳经典的HML、CSS、JavaScript三段式开辟方式，纵然用HML标签文件搭建结构、使用CSS文件形貌样式、使用JavaScript文件处理处罚逻辑。该范式更符合于Web前端开辟者的使用风俗，便于快速将已有的Web应用改造成方舟UI框架应用
结构概述

组件按照结构的要求依次分列，构成应用的页面。在声明式UI中，全部的页面都是由自界说组件构成，开辟者可以根据自己的需求，选择符合的结构举行页面开辟。
结构相干的容器组件可形成对应的结构效果组件地区（蓝区方块）：组件地区表现组件的巨细，width、height属性用于设置组件地区的巨细。组件内容区（黄色方块）：组件内容区巨细为组件地区巨细减去组件的border值，组件内容区巨细会作为组件内容（大概子组件）举行巨细测算时的结构测算限定。组件内容（绿色方块）：组件内容自己占用的巨细，比如文本内容占用的巨细。组件内容和组件内容区不愿定匹配，比如设置了固定的width和height，此时组件内容的巨细就是设置的width和height减去padding和border值，但文本内容则是通过文本结构引擎测算后得到的巨细，大概出现文本真实巨微小于设置的组件内容区巨细。当组件内容和组件内容区巨细不划一时，align属性收效，界说组件内容在组件内容区的对齐方式，如居中对齐。组件结构边界（虚线部分）：组件通过margin属性设置外边距时，组件结构边界就是组件地区加上margin的巨细。
线性结构

结构容器：具有结构本领的容器组件，可以承载其他元素作为其子元素，结构容器会对其子元素举行尺寸盘算和结构分列。结构子元素：结构容器内部的元素。主轴：线性结构容器在结构方向上的轴线，子元素默认沿主轴分列。Row容器主轴为程度方向，Column容器主轴为垂直方向。交错轴：垂直于主轴方向的轴线。Row容器交错轴为垂直方向，Column容器交错轴为程度方向。间距：结构子元素的间距。
在线性结构下，常用空缺添补组件Blank，在容器主轴方向主动添补空缺空间，到达自顺应拉伸效果。Row和Column作为容器，只必要添加宽高为百分比，当屏幕宽高发生变革时，会产生自顺应效果
父容器尺寸确定时，使用百分比设置子元素和兄弟元素的宽度，使他们在恣意尺寸的装备下保持固定的自顺应占比。

1. build() {
2.    Column({space:10}){
3.      Row({space:20}){
4.        Column().width(40).height(40).backgroundColor('gray')
5.        Column().width(40).height(40).backgroundColor('gray')
6.        Column().width(40).height(40).backgroundColor('gray')
7.        Column().width(40).height(40).backgroundColor('gray')
8.      }.width('90%')
9.      .height(60)
10.      .border({color:Color.Red,width:1,style:BorderStyle.Solid})
11.      // .layoutWeight(1)
12.      Row({space:20}){
13.        Column().width(40).height(40).backgroundColor('gray')
14.        Column().width(40).height(40).backgroundColor('gray')
15.        Column().width(40).height(40).backgroundColor('gray')
16.        Column().width(40).height(40).backgroundColor('gray')
17.      }.width('90%')
18.      .height(60)
19.      .border({color:Color.Red,width:1,style:BorderStyle.Solid})
20.      .justifyContent(FlexAlign.SpaceBetween)
21.      Row(){
22.        Column().width(40).height(40).backgroundColor('gray')
23.        Column().width(40).height(40).backgroundColor('gray')
24.        Column().width(40).height(40).backgroundColor('gray')
25.        Column().width(40).height(40).backgroundColor('gray')
26.      }.width('90%')
27.      .height(60)
28.      .border({color:Color.Red,width:1,style:BorderStyle.Solid})
29.      .justifyContent(FlexAlign.SpaceEvenly)//水平对齐
30.      .alignItems(VerticalAlign.Bottom)//垂直对齐
31.      Row(){
32.        Text('你好')
33.        //填充空白
34.      Blank().color('red')
35.        //组件提供勾选框样式、状态按钮样式及开关样式。
36.        Toggle({type:ToggleType.Switch,isOn:true})
37.      }.width('90%')
38.      .height(60)
39.      .border({color:Color.Red,width:1,style:BorderStyle.Solid})
40.      Row(){
41.        Column().width(40).height(40).backgroundColor('gray').layoutWeight(1)
42.        Column().width(40).height(40).backgroundColor('black').layoutWeight(1)
43.        Column().width(40).height(40).backgroundColor('green').layoutWeight(1)
44.        Column().width(40).height(40).backgroundColor('blue').layoutWeight(1)
45.      }.width('90%')
46.      .height(60)
47.      .border({color:Color.Red,width:1,style:BorderStyle.Solid})
48.     }
49.     .height('100%')
50.     .width('100%')
51.     .border({color:Color.Blue,width:1,style:BorderStyle.Dotted})
52.     .justifyContent(FlexAlign.Start)//主轴对齐方式
53.     .alignItems(HorizontalAlign.Start)//侧轴对齐
54.   }
55. }

复制代码

1. build() {
2.    Scroll(){
3.   Column({space:10}){
4.     ForEach(this.nums,(n:number,i)=>{
5.       Row(){
6.         Text(n.toString())
7.       }.height(100)
8.       .width('90%')
9.       .backgroundColor('gray')
10.       .justifyContent(FlexAlign.Center)
11.       .borderRadius(10)
12.     })
13.   }.width('100%')
14.     }
15.     .height('100%')
16.     .width('100%')
17.     .scrollable(ScrollDirection.Vertical)
18.     .scrollBar(BarState.Auto)//开关滚动
19.     .scrollBarColor('red')//滚动条的颜色
20.     .scrollBarWidth(10)
21.   }
22. }

复制代码