初识ArkUI

时间：2024-11-23 07:08:56

初识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作为容器，只需要添加宽高为百分比，当屏幕宽高发生变化时，会产生自适应效果

父容器尺寸确定时，使用百分比设置子元素和兄弟元素的宽度，使他们在任意尺寸的设备下保持固定的自适应占比。

build() {
   Column({space:10}){
     Row({space:20}){
       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:Color.Red,width:1,style:BorderStyle.Solid})
     // .layoutWeight(1)
     Row({space:20}){
       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:Color.Red,width:1,style:BorderStyle.Solid})
     .justifyContent(FlexAlign.SpaceBetween)
     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:Color.Red,width:1,style:BorderStyle.Solid})
     .justifyContent(FlexAlign.SpaceEvenly)//水平对齐
     .alignItems(VerticalAlign.Bottom)//垂直对齐
     Row(){
       Text('你好')
       //填充空白
     Blank().color('red')
       //组件提供勾选框样式、状态按钮样式及开关样式。
       Toggle({type:ToggleType.Switch,isOn:true})
     }.width('90%')
     .height(60)
     .border({color:Color.Red,width:1,style:BorderStyle.Solid})
     Row(){
       Column().width(40).height(40).backgroundColor('gray').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})
    }
    .height('100%')
    .width('100%')
    .border({color:Color.Blue,width:1,style:BorderStyle.Dotted})
    .justifyContent(FlexAlign.Start)//主轴对齐方式
    .alignItems(HorizontalAlign.Start)//侧轴对齐
  }
}

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(10)
  }
}

相关文章