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

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

ts 复制代码
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)//侧轴对齐
  }
}
ts 复制代码
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)
  }
}
相关推荐
前端菜鸟日常6 小时前
鸿蒙版(ArkTs) 贪吃蛇,包含无敌模式 最高分 暂停和继续功能
华为·harmonyos
鸿蒙布道师11 小时前
鸿蒙NEXT开发数值工具类(TS)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
塞尔维亚大汉16 小时前
鸿蒙南向开发 ——轻量系统芯片移植指南(二)
物联网·嵌入式·harmonyos
别说我什么都不会18 小时前
OpenHarmony内核系统调用hats测试用例编写指南
物联网·嵌入式·harmonyos
90后的晨仔19 小时前
鸿蒙ArkTS是如何实现并发的?
harmonyos
鸿蒙布道师21 小时前
鸿蒙NEXT开发日期工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
HMSCore1 天前
在应用内购票、寄件时,如何一键填充所需信息?
harmonyos
HarmonyOS_SDK1 天前
在应用内购票、寄件时,如何一键填充所需信息?
harmonyos
枫叶丹41 天前
【HarmonyOS Next之旅】DevEco Studio使用指南(十一)
华为·harmonyos·deveco studio·harmonyos next
H_MY1 天前
鸿蒙 —— 系统图标大全
harmonyos