【鸿蒙】HarmonyOS NEXT应用开发快速入门教程之布局篇（下）

系列文章目录

【鸿蒙】HarmonyOS NEXT开发快速入门教程之ArkTS语法装饰器（上）
【鸿蒙】HarmonyOS NEXT开发快速入门教程之ArkTS语法装饰器（下）
【鸿蒙】HarmonyOS NEXT应用开发快速入门教程之布局篇（上）
【鸿蒙】HarmonyOS NEXT应用开发快速入门教程之布局篇（下）

文章目录

系列文章目录
前言
一、常见布局详细使用
- （4）相对布局（RelativeContainer）
- - 1、基本概念：
  - 2、语法提炼：
  - 3、对齐方式
  - - 水平方向：
    - 垂直方向
  - 4、使用示例
  - - 示例1：
    - 示例2：
    - 示例3：
    - 示例4：
    - 示例5：
- （5）相对布局2（offset）
- - 示例
  - 示例1：
  - 示例2：
- （6）绝对布局（position）
- - 示例1：
  - 示例2：
  - 示例3：
  - 示例4：
  - 示例5：
二、布局中的渲染控制
- 1. if/else
- 2. ForEach
- - 示例1：
  - 示例2：
三、项目开发过程中布局像素单位的选择
- 1、像素单位介绍
- - px
  - vp
  - fp
  - lpx
- 2、像素单位之间的转换
- 3、实际开发单位的选择
- - lpx基准宽（designWidth）设置：
四、结束

前言

HarmonyOS NEXT（鸿蒙应用）开发快速入门教程之布局篇(下)，基于HarmonyOS NEXT Beta1版本（api 12）讲解。

本文将从前端开发者角度来学习鸿蒙的布局语法，通过类比鸿蒙布局和web css布局相似之处，帮助大家快速掌握鸿蒙布局开发。

一、常见布局详细使用

（4）相对布局（RelativeContainer）

此相对布局非css里面的相对布局而是安卓里面的相对布局，对于web开发人员来说比较新的一种布局方式，而对于安卓开发来说就非常熟悉，css相对布局在鸿蒙里面也有类似用法后续会讲到。

RelativeContainer为采用相对布局的容器，支持容器内部的子元素设置相对位置关系，适用于界面复杂场景的情况，对多个子组件进行对齐和排列。子元素支持指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局。

通俗介绍说就是子元素放置位置既可以设置相对父容器，也可以设置相对兄弟组件，相对父元素就可以看做在一个密闭长方形空间你想把东西放置它的上下左右某个对齐方向上，相对兄弟组件可以看成两个盒子，让盒子上面对齐排列或者盒子上和另一个盒子下对齐，左对齐或者左与右对齐确定子元素位置。所以这边相对的是其他组件而css的相对的是自己，因此必须设置相对的元素，这个元素称为锚点。

1、基本概念：

锚点：通过锚点设置当前元素基于哪个元素确定位置。
对齐方式：通过对齐方式，设置当前元素是基于锚点的上中下对齐，还是基于锚点的左中右对齐。

2、语法提炼：

RelativeContainer() {
  子组件().alignRules({
     方向(left或right或top或bottom):{anchor:锚点ID,align:对齐枚举值},
     方向(left或right或top或bottom):{anchor:锚点ID,align:对齐枚举值},
     ....
     
  })
}

一般设置2个方向就能确定位置了，比如left+top,如果子组件未设置高度或宽度的，也可以通过设置3个以上方向让子组件拉伸填满父组件宽度或高度。

为了明确定义锚点，必须为RelativeContainer及其子元素设置ID，RelativeContainer不设置默认id为“ __ container __ ”，其余子元素的ID通过id属性设置。不设置id的组件能显示，但是不能被其他子组件作为锚点

3、对齐方式

align值对应枚举值

水平方向：

HorizontalAlign.Start 左
HorizontalAlign.Center 中
align:HorizontalAlign.End 右

垂直方向

VerticalAlign.Top 上
VerticalAlign.Center 中
VerticalAlign.Bottom 下

4、使用示例

示例1：

@Entry
@Component
struct Index {

  build() {
    RelativeContainer() {
      Button('按钮').alignRules({
        left: { anchor: '__container__', align: HorizontalAlign.Start },
        bottom: { anchor: '__container__', align: VerticalAlign.Bottom } })
    }.width('100%')
    .height('100%')
  }
}

说明：按钮水平方向基于父容器左边对齐，垂直方向基于父容器底部对齐

运行效果：
在这里插入图片描述

示例2：

@Entry
@Component
struct Index {

  build() {
    RelativeContainer() {
      Button('按钮').alignRules({
        right: { anchor: '__container__', align: HorizontalAlign.Center },
        top: { anchor: '__container__', align: VerticalAlign.Center } })
        .width(100).height(150)
    }.width('100%')
    .height('100%')
  }
}

说明：按钮的右边与父容器水平方向中间对齐，顶部与父容器纵向中间对齐

运行效果：
在这里插入图片描述

示例3：

@Entry
@Component
struct Index {

  build() {
    RelativeContainer() {
      Column() {
        Text('矩形')
      }
      .width(100)
      .height(50)
      .backgroundColor('#ff22f2')
      .margin({
        top: 80,
        left: 100
      })
      .id('rect')

      Button('按钮').alignRules({
        left: { anchor: 'rect', align: HorizontalAlign.End },
        top: { anchor: 'rect', align: VerticalAlign.Bottom }
      })
        .width(100).height(150)
    }.width('100%')
    .height('100%')
  }
}

说明：按钮左边与矩形右边对齐，按钮顶部与按钮底部对齐

运行效果：
在这里插入图片描述

示例4：

@Entry
@Component
struct Index {
  build() {
    RelativeContainer() {
      Column() {
        Text('矩形')
      }
      .width(100)
      .height(50)
      .backgroundColor('#ff22f2')
      .margin({
        top: 80,
        left: 100
      })
      .id('rect')

      Button('按钮').alignRules({
        left: { anchor: 'rect', align: HorizontalAlign.End },
        top: { anchor: 'rect', align: VerticalAlign.Bottom }
      }).id('button').width(100).height(150)

      Button('按钮2').alignRules({
        right: { anchor: 'button', align: HorizontalAlign.Start },
        top: { anchor: 'button', align: VerticalAlign.Bottom }
      }).width(100).height(150)
    }.width('100%')
    .height('100%')
  }
}

说明：
按钮1左边与矩形右边对齐，按钮1顶部与按钮底部对齐
按钮2右边与按钮1左边对齐，按钮2顶部与按钮1底部对齐

运行效果：
在这里插入图片描述

示例5：

@Entry
@Component
struct Index {
  build() {
    RelativeContainer() {
      Button('按钮').alignRules({
        right: { anchor: '__container__', align: HorizontalAlign.End },
        top: { anchor: '__container__', align: VerticalAlign.Top },
        bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
      })

    }
  }
}

说明：通过设置按钮顶部贴父容器顶部，底部贴父容器底部，按钮高度自动填满父元素

运行效果：
在这里插入图片描述

（5）相对布局2（offset）

通用属性offset的作用跟css相对布局是一样的，相对于自身的位置进行偏移，不影响父容器布局。

基本语法：

组件.offset({
         x:10,
         y:10
       })

组件.offset({
         x:-10,
         y:-10
       })
组件.offset({
         x:'10px',
         y:'10vp'
       })
       
组件.offset({
         x:"20%",
         y:10
       })

说明：
1、x表示水平方向偏移量，y表示纵向方法偏移量，值单位默认vp，也可以字符串自带单位。
2、x为负值表示向左偏移，正值向右偏移，同理y为负值表示向上偏移，正值向下偏移。
3、值也支持%字符串，百分比相对的是父容器的宽或高，例如x:50%,则组件向右偏移父容器宽度的50%

示例

按钮初始位置在屏幕左上角

@Entry
@Component
struct Index {
  build() {
    Column(){
       Button('按钮')
    }.width('100%').height(500).backgroundColor(Color.Green).alignItems(HorizontalAlign.Start)
  }
}

在这里插入图片描述

示例1：

@Entry
@Component
struct Index {
  build() {
    Column(){
       Button('按钮').offset({
         x:100,
         y:100
       })
    }.width('100%').height(500).backgroundColor(Color.Green).alignItems(HorizontalAlign.Start)
  }
}

运行效果：

在这里插入图片描述

示例2：

@Entry
@Component
struct Index {
  build() {
    Column(){
       Button('按钮').offset({
         x:'50%',
         y:0
       })
    }.width('100%').height(500).backgroundColor(Color.Green).alignItems(HorizontalAlign.Start)
  }
}

运行效果：

在这里插入图片描述

（6）绝对布局（position）

通用属性position的作用跟css绝对布局是一样的，子组件相对父容器确定位置，当父容器为Row/Column/Flex时，设置position的子组件不占位，不影响其他兄弟子组件正常布局。

基本语法：

组件.position({
          x:10,
          y:10
       })

组件.position({
          x:-10,
         y:-10
       })

组件.position({
          x:"50%",
         y:"10px"
       })

组件.position({
          left:10,
          top:10
       })
组件.position({
          right:10,
          bottom:10
       })

说明：
1、入参类型既支持Position(x\y)类型也支持Edges（top\bottom\left\right）类型
2、和offset一样值支持字符串单位、百分比、数字类型，默认单位vp，支持正负值。
3、Edges（top\bottom\left\right）类型用法跟css基本一致，top相对父容器顶部距离，bottom相对父容器底部距离，left相对父容器左边距离，right相对父容器右边距离，通过边距来确定组件相对于父组件的位置。只需设置2个方向就能确定位置，比如top+left或者bottom+right，同时设置top和bottom，仅top生效；同时设置left和right，仅left生效
4、Position(x\y)类型的x\y实际等同于Edges left\top,x=left,y=top
5、与css不同的是鸿蒙的绝对布局相对父容器起始位置需要扣去padding部分，相当于ie盒子模型内容部分。

示例1：

@Entry
@Component
struct Index {
  build() {
    Column(){
       Button('按钮').position({
         x:'0',
         y:'500px'
       })
    }.width('100%').height(500).backgroundColor(Color.Green).alignItems(HorizontalAlign.Start)
  }
}

运行效果：

在这里插入图片描述

示例2：

@Entry
@Component
struct Index {
  build() {
    Column(){
       Button('按钮').position({
         left:0,
        bottom:-25
       }).width(100).height(50)
    }.width('100%').height(500).backgroundColor(Color.Green).alignItems(HorizontalAlign.Start)
  }
}

运行效果：
在这里插入图片描述

说明：按钮底部和父容器底部相距-25vp，也即按钮向下平移了25vp等于按钮自身高度一半

示例3：

@Entry
@Component
struct Index {
  build() {
    Column(){
       Button('按钮').position({
         right:0,
        bottom:0
       }).width(100).height(50)
    }.width('100%').height(500).backgroundColor(Color.Green).alignItems(HorizontalAlign.Start)
  }
}

运行效果：
在这里插入图片描述

说明：按钮和父容器右边和底部贴合，距离为0，所以按钮位置在父容器右下角

示例4：

子组件位于父组件水平垂直居中通用方法：

@Entry
@Component
struct Index {
  build() {
    Column() {
      Button('按钮').position({
        left: '50%',
        top: '50%'
      }).translate({
        x: '-50%',
        y: '-50%'
      }).width(100).height(50)
    }.width('100%').height(500).backgroundColor(Color.Green).alignItems(HorizontalAlign.Start)
  }
}

运行效果：
在这里插入图片描述

说明：position+translate可以实现任意子组件水平垂直居中，position分别设置了50%此时子组件距离父组件上边和左边都为父组件宽高一半距离，此时子组件的左上角点刚好在父组件正中心点。想要让子组件居中只需让子组件的中心点和父组件中心重叠，把子组件向左和向上平移自身一半宽高即可，可以用通用属性translate进行平移

.translate({
        x: '-50%',
        y: '-50%'
      }

此处百分比相对组件本身宽高，负值表示往上或往左平移

示例5：

父容器带padding情况

@Entry
@Component
struct Index {
  build() {
    Column(){
      Button('按钮').position({
        top:0,
        left:0
      }).width(100).height(50)
    }.width('100%').height(500).backgroundColor(Color.Green).padding(50)
  }
}

运行效果：
在这里插入图片描述

说明：从运行效果可以看出相对父容器起始位置需要扣除父容器的padding部分

二、布局中的渲染控制

在vue中可以使用v-if，v-else条件语句控制子组件是否渲染，也可以通过v-for循环渲染多个子组件。鸿蒙也有类似用法分别为if/else和ForEach

1. if/else

布局渲染条件控制语句

示例：

@Entry
@Component
struct Index {
  @State type:number=0
  build() {
    Column() {
        //显示文本
       if(this.type==0){
         Text('文本')
       }
       //显示按钮
       else if(this.type==1){
         Button('按钮')
       }
       //显示文本输入框
       else{
         TextInput({placeholder:'文本输入框'})
       }

       Button('改变类型').onClick(()=>{
          this.type=++this.type%3
       }).margin({top:100})
    }.width('100%').height('100%').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center)
  }
}

运行效果

请添加图片描述

说明：通过改变状态变量type动态控制显示的子组件，

需要注意if else内部只能写入子组件不能写入arkTs语法，比如打印信息console.log()就会报错。

2. ForEach

布局循环渲染控制语句
语法：

ForEach(list:Array<ESObject>,fn:(item:ESObject,index:number)=>void,fn:(item:ESObject,index:number)=>string)
其中：item为数组当前元素值，index为循环的索引

ForEach有三个入参，第一个入参是数据源数组，第二个入参是个函数，内部添加要循环渲染的子组件，第三个参数是函数返回唯一标识key，第三个入参类似vue v-for 的key作用为了避免重复渲染导致的额外开销提高性能，所以返回的key必须唯一值，不然会异常

示例1：

@Entry
@Component
struct Index {
  @State list: number[] = [1, 2, 3, 4, 5, 6]

  build() {
    Column() {
      ForEach(this.list, (item: number, index: number) => {
      //需要循环渲染的子组件
        Row() {
          Text(`内容为${item},第${index}行`)
        }.padding(15).justifyContent(FlexAlign.Start).width('100%')
        //
      }, (item: number, index: number) => index + '')
    }.width('100%').height('100%')
  }
}

运行结果：
在这里插入图片描述

示例2：

List和ListItem系统组件(列表)使用

@Entry
@Component
struct Index {
  @State list: number[] = [1, 2, 3, 4, 5, 6]

  build() {
    List() {
      ForEach(this.list, (item: number, index: number) => {
        ListItem() {
           Text(`${index}`)
        }.height(60).width('100%').border({
          width:1,
          color:"#f2f2f2"
        })
      }, (item: number, index: number) => index + '')
    }
  }
}

运行结果：

在这里插入图片描述

ps：如果列表数据非常多加载卡顿也可以使用懒加载LazyForEach，请看官网文档LazyForEach：数据懒加载这里不再介绍。

三、项目开发过程中布局像素单位的选择

1、像素单位介绍

鸿蒙布局像素单位支持px、vp、lpx、fp4种单位，其中fp主要用来设置字体大小，数值不写单位默认是vp

px

屏幕物理像素单位。

vp

虚拟像素单位类似安卓里面的dp，VP是根据屏幕的‌PPI（每英寸像素点数）进行换算的。具体换算公式为：vp = (px * 160) / PPI，在480PPI手机上1vp=3px，简而言之，vp是屏幕密度相关像素，根据屏幕像素密度转换为屏幕物理像素。

fp

字体像素，与vp类似适用屏幕密度变化，区别在于fp会随系统字体大小设置变化。即默认情况下 1 fp = 1vp。如果用户在设置中选择了更大的字体，字体的实际显示大小就会在 vp 的基础上乘以 scale 系数，即 1 fp = 1 vp * scale

lpx

视窗逻辑像素单位，lpx单位为实际屏幕宽度与逻辑宽度（通过designWidth配置）的比值，designWidth默认值为720。当designWidth为720时，在实际宽度为1440物理像素的屏幕上，1lpx为2px大小。

lpx类似css里面的rem或者小程序里面的rpx单位，以屏幕宽度为基准一种比值逻辑单位

2、像素单位之间的转换

鸿蒙sdk已自带单位换算方法，直接调用即可，如下：

在这里插入图片描述
示例：

    //vp转px单位
    vp2px(20)
    //px转lpx
    px2lpx(20)
    //px转vp
    px2vp(20)
    //vp转lpx，没有直接转的函数，所以需要先把vp转px，在把px转lpx
    px2lpx(vp2px(20))

3、实际开发单位的选择

实际开发中我们需要适配所有设备，选择某个单位使得布局在所有设备显示比例一样。从上面介绍看，vp和lpx都能满足我们的需求，尽管vp是默认单位也是官方推荐使用的单位，但在实际开发中我们拿到设计稿尺寸跟vp换算复杂无法直接计算出来，在1440屏幕宽度的设备上1vp大约=3px，假如从设计稿读取尺寸为285px,换算为vp=285/3，每个地方都要这样心算就比较费劲了。当然你也可以选择用px2vp（285）,但是每个地方都这样写代码显得囊肿。所以推荐使用lpx作为开发单位。如果你是web开发出身，你完全可以把lpx当做rem单位理解，鸿蒙的lpx支持我们自定义基准宽（designWidth），所以我们能轻松通过自定义designWidth值使得设计稿1px=1lpx。这样就不需要复杂换算，设计稿读取值多少就写多少。

lpx基准宽（designWidth）设置：

路径： entry/src/main/resources/base/profile/main_pages.json，添加：

"window": {
    "designWidth": 750
  }

在这里插入图片描述

拿到的设计稿宽多少，designWidth值就设置多少，比如设计稿是1080x1920，designWidth设置为1080。
这样设置完毕1px=1lpx

验证：

@Entry
@Component
struct Index {
  build() {
    Column() {
      Text('750lpx').width('750lpx').height('100lpx').backgroundColor(Color.Red)
      Text('730lpx').width('730lpx').height('100lpx').backgroundColor(Color.Yellow)
      Text('375lpx').width('375lpx').height('100lpx').backgroundColor(Color.Blue)
    }.alignItems(HorizontalAlign.Start)
  }
}

运行效果：
在这里插入图片描述
从运行效果可以看出当宽设置为750lpx刚好铺满屏幕，730lpx有一点间隙，375lpx占屏幕一半，符合预期效果，验证成功。

四、结束

结束前还是顺便提下鸿蒙布局里有个很常用的通用属性跟css命名长得最不一样，可能很多人一开始都找不到。

css中有个：overflow: hidden 表示子元素超出父元素范围的部分会被隐藏

对应的鸿蒙写法为：clip(true)

示例

未加clip(true)效果

@Entry
@Component
struct Index {
  build() {
    Stack() {
      Column() {
        Button('按钮').width(350).height(100)
      }
      .width(200)
      .height(200)
      .backgroundColor(Color.Red)
      .justifyContent(FlexAlign.Center)
     
    }.height('100%').width('100%')
  }
}

在这里插入图片描述

加clip(true)效果

@Entry
@Component
struct Index {
  build() {
    Stack() {
      Column() {
        Button('按钮').width(350).height(100)
      }
      .width(200)
      .height(200)
      .backgroundColor(Color.Red)
      .justifyContent(FlexAlign.Center)
      .clip(true)
    }.height('100%').width('100%')
  }
}