初识ArkUI

ArkUI为应用的UI开发提供了完整的基础设施，包括简洁的UI语法，丰富的UI功能，以及实时界面预览工具，可以支持开发者进行可视化界面开发

概念：

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

组件：

UI构建与显示的最小单位，开发者通过多种组件的组合，构建出满足自身应用诉求的完整界面。

两种开发范式：

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

类Web开发范式：采用经典的HTML,CSS,JavaScript三段式开发方式，即使用HML标签文件搭建布局，使用CSS文件描述样式，使用JavaScrip文件处理逻辑。该范式更符合于Web前端开发者的使用习惯，便于快速将已有的Web应用改造成方舟UI框架应用。

不同应用类型支持的开发范式

stage模型：应用或服务的页面支持声明式开发范式，卡片支持声明式开发范式和类Web开发范式

FA模型：应用或服务的页面支持声明式开发范式和类Web开发范式，卡片支持类Web开发范式

ArkUI特点：

开发效率高，开发体验好（界面也是代码，让开发者的编程体验得到提升。）

性能优越：声明式UI前端和UI后端分层，语言编译器和运行时的优化，生态容易快速推进，能够借主流语言生态快速推进，语言相对中立友好，有相应的标准组织可以逐步演进。

布局

线性布局

线性布局是开发中最常用的布局，通过线性容器row和column构建。线性布局是其他布局的基础，其子元素在线性方向上依次排列。

线性布局基本概念：

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

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

主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。

间距：布局子元素的间距。

space属性设置排列方向上子元素的间距

Blank常用空白填充组件

Toggle()组件提供勾选框样式、状态按钮样式及开关样式。

ts 复制代码

Row(){
  Text('你好')
  //  Blank()空白填充组件
 Blank().color('red')
  // Toggle()组件提供勾选框样式、状态按钮样式及开关样式。
  Toggle({type:ToggleType.Switch,isOn:true})
}.width('90%')
.height(60)
.border({color:'red',width:1,style:BorderStyle.Solid})
 .layoutWeight(2)

justifyContent(FlexAlign.Start):主轴对齐方式

(End从后往前排，SpaceAround：左右间距 SpaceEvenly:水平对齐)

.alignItems(HorizontalAlign.Start):侧轴对齐

(Top:靠上Bottom:靠下)

ts 复制代码

Row(){
  Column().width(40).height(40).backgroundColor('gray')
  Column().width(40).height(40).backgroundColor('gray')
  Column().width(40).height(40).backgroundColor('gray')
  Column().width(40).height(40).backgroundColor('gray')
}.width('90%')
.height(60)
.border({color:'red',width:1,style:BorderStyle.Solid})
.justifyContent(FlexAlign.SpaceEvenly)
.alignItems(VerticalAlign.Bottom)

自适应缩放

自适应缩放是指子元素随容器尺寸的变化而按照预设的比例自动调整尺寸，适应各种不同大小的设备。

布局使用scroll组件

scrollable(ScrollDirection.Vertical)//滚动方向为垂直方向

scrollBar(BarState.Auto)//On:打开滚动条 Off:关闭滚动条 Auto:自动

scrollBarColor(Color.Yellow)//滚动条的颜色

scrollBarWidth(5)//滚动条的宽度

ts 复制代码

@State message: string = 'Hello World';
@State nums:number[]=[1,2,3,4,5,6,7,8,9,10]
build() {
 Scroll(){
    Column({space:10}){
      ForEach(this.nums,(n:number,i)=>{
        Row(){
          Text(n.toString())
        }.height(100)
        .backgroundColor('gray')
        .width('90%')
        .justifyContent(FlexAlign.Center)
        .borderRadius(10)

        Row(){
          Text(n.toString())
        }.height(100)
        .backgroundColor('gray')
        .width('90%')
        .justifyContent(FlexAlign.Center)
        .borderRadius(10)
      })
    }.width('100%')

  }
  .height('100%')
  .width('100%')
  .scrollable(ScrollDirection.Vertical)
  .scrollBar(BarState.Auto)
  .scrollBarColor(Color.Yellow)
  .scrollBarWidth(5)
}