鸿蒙4.0应用开发——ArkUI基本布局_arcui鸿蒙

【高心星出品】

ArkUI基本布局

视频教程传送门

搭建开发环境

环境要求

为保证DevEco Studio正常运行，建议电脑配置满足如下要求：
操作系统：Windows10 64位、Windows11 64位
内存：8GB及以上
硬盘：100GB及以上
分辨率：1280*800像素及以上

下载安装软件

下载软件

进入HUAWEI DevEco Studio产品页，点击下载列表后的按钮，下载DevEco Studio。

安装软件

下载完成后，打开压缩包双击下载的“deveco-studio-xxxx.exe”，进入DevEco Studio安装向导。

在如下安装选项界面勾选DevEco Studio后，单击Next，直至安装完成。

安装完成后，单击Finish完成安装。

配置环境

第一次启动DevEco Studio需要配置环境，首先需要安装Node.js与ohpm。

在弹出的SDK下载信息页面，单击Next，并在弹出的License Agreement窗口，阅读License协议，需同意License协议后，单击Next。

确认设置项的信息，点击Next开始安装。

布局概述

布局介绍

组件按照布局的要求依次排列，构成应用的页面。在声明式UI中，所有的页面都是由自定义组件构成，开发者可以根据自己的需求，选择合适的布局进行页面开发。

布局指用特定的组件或者属性来管理用户页面所放置UI组件的大小和位置。在实际的开发过程中，需要遵守以下流程保证整体的布局效果：

• 确定页面的布局结构。

• 分析页面中的元素构成。

• 选用适合的布局容器组件或属性控制页面中各个元素的位置和大小。

  组件：必备属性 功能属性 位置属性

布局结构

Page表示页面的根节点，Column/Row等元素为系统组件。针对不同的页面结构，ArkUI提供了不同的布局组件来帮助开发者实现对应布局的效果，例如Row用于实现线性布局。

布局元素

• 组件区域（蓝区方块）：组件区域表明组件的大小，width、height属性设置该区域的大小。

• 组件内容区（黄色方块）：组件区域大小减去组件的padding值，组件内容区大小会作为组件内容（或者子组件）进行大小测算时的布局测算限制。

• 组件内容（绿色方块）：组件内容本身占用的大小，比如文本内容占用的大小。组件内容和组件内容区不一定匹配，比如设置了固定的width和height，此时组件内容区大小就是设置的width和height减去padding值，但文本内容则是通过文本布局引擎测算后得到的大小，可能出现文本真实大小小于设置的组件内容区大小。当组件内容和组件内容区大小不一致时，align属性生效，定义组件内容在组件内容区的对齐方式，如居中对齐。

• 组件布局边界（虚线部分）：组件通过margin属性设置外边距时，组件布局边界就是组件区域加上margin的大小。

构建布局

线性布局

基本概念

• 布局容器：具有布局能力的容器组件，可以承载其他元素作为其子元素，布局容器会对其子元素进行尺寸计算和布局排列。
• 布局子元素：布局容器内部的元素。
• 主轴：线性布局容器在布局方向上的轴线，子元素默认沿主轴排列。Row容器主轴为横向，Column容器主轴为纵向。
• 交叉轴：垂直于主轴方向的轴线。Row容器交叉轴为纵向，Column容器交叉轴为横向。
• 间距：布局子元素的纵向间距。

布局方向

clomn布局方向为垂直布局，row布局为水平布局，space属性约束了布局子元素的间距。

Column({ space: 20 }) {
 ...
}.width('100%')
1
2
3

Row({ space: 35 }) {
 ...
}.width('90%')
1
2
3

主轴上的对齐方式

在布局容器内，可以通过justifyContent属性设置子元素在容器主轴上的排列方式。

column容器

Column({}) {
 ...
}.width('100%').height(300).justifyContent(FlexAlign.xxx)
1
2
3

row容器

Row({}) {
 ...
}.width('100%').height(200).justifyContent(FlexAlign.xxx)
1
2
3

交叉轴上的对齐方式

在布局容器内，可以通过alignItems属性设置子元素在交叉轴（排列方向的垂直方向）上的对齐方式。其中，交叉轴为垂直方向时，取值为VerticalAlign类型，水平方向取值为HorizontalAlign。

交叉轴默认都是居中对齐的。

column

Column({}) {
 ...
}.width('100%').alignItems(HorizontalAlign.xxx)
1
2
3

row

Row({}) {
 
}.width('100%').height(200).alignItems(VerticalAlign.xxx)
1
2
3

空白填充

在线性布局下，常用空白填充组件Blank，在容器主轴方向自动填充空白空间，达到自适应拉伸效果。

blank()要起作用：row–宽度或者clomn–高度

 Row() {
        Text('Bluetooth').fontSize(18)
        Blank()
        Toggle({ type: ToggleType.Switch, isOn: true })
      }.backgroundColor(0xFFFFFF).borderRadius(15).padding({ left: 12 }).width('100%')
    }.backgroundColor(0xEFEFEF).padding(20).width('100%')
1
2
3
4
5
6

自适应缩放

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

layoutWeight属性

父容器尺寸确定时，使用layoutWeight属性设置子组件和兄弟元素在主轴上的权重，忽略元素本身尺寸设置，使它们在任意尺寸的设备下自适应占满剩余空间。

子元素横向排列，宽度占比为2：2：6

 Row() {
        Column() {
          Text('layoutWeight(1)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(2).backgroundColor(0xF5DEB3).height('100%')

        Column() {
          Text('layoutWeight(2)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(4).backgroundColor(0xD2B48C).height('100%')

        Column() {
          Text('layoutWeight(6)')
            .textAlign(TextAlign.Center)
        }.layoutWeight(6).backgroundColor(0xF5DEB3).height('100%')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

百分比值

子元素横向排列，宽度占比2：3：5

 Row() {
        Column() {
          Text('left width 20%')
            .textAlign(TextAlign.Center)
        }.width('20%').backgroundColor(0xF5DEB3).height('100%')

        Column() {
          Text('center width 50%')
            .textAlign(TextAlign.Center)
        }.width('50%').backgroundColor(0xD2B48C).height('100%')

        Column() {
          Text('right width 30%')
            .textAlign(TextAlign.Center)
        }.width('30%').backgroundColor(0xF5DEB3).height('100%')
      }.backgroundColor(0xffd306).height('30%')
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

相对布局

基本概念

RelativeContainer为采用相对布局的容器，支持容器内部的子元素设置相对位置关系。子元素支持指定兄弟元素作为锚点，也支持指定父容器作为锚点，基于锚点做相对位置布局。

锚点设置

锚点必须要有id

RelativeContainer父组件为锚点

RelativeContainer() {
  Row()
    // 添加其他属性
    .alignRules({
      top: { anchor: '__container__', align: VerticalAlign.Top },
      left: { anchor: '__container__', align: HorizontalAlign.Start }
    })
    .id("row1")

  Row()
    ...
    .alignRules({
      top: { anchor: '__container__', align: VerticalAlign.Top },
      right: { anchor: '__container__', align: HorizontalAlign.End }
    })
    .id("row2")
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

子元素为锚点

RelativeContainer() {
  ...
  top: { anchor: 'row1', align: VerticalAlign.Bottom },
  ...
}
.width(300).height(300)
.margin({ left: 20 })
.border({ width: 2, color: '#6699FF' })
1
2
3
4
5
6
7
8

设置相对于锚点的对齐位置

层叠布局

基本概念

层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素（子组件）依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。

默认情况下，容器中的子组件根据自己的大小默认进行居中堆叠。

对齐方式

Stack组件通过alignContent参数实现位置的相对移动。如图2所示，支持九种对齐方式。

Stack({ alignContent: Alignment.BottomStart }) {
 ...
}.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)
1
2
3

层级控制

Stack容器中兄弟组件显示层级关系可以通过Z序控制的zIndex属性改变。zIndex值越大，显示层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方。

Stack({ alignContent: Alignment.BottomStart }) {
  Column() {
    Text('Stack子元素1').fontSize(20)
  }.width(100).height(100).backgroundColor(0xffd306).zIndex(2)

  Column() {
    Text('Stack子元素2').fontSize(20)
  }.width(150).height(150).backgroundColor(Color.Pink).zIndex(1)

  Column() {
    Text('Stack子元素3').fontSize(20)
  }.width(200).height(200).backgroundColor(Color.Grey)
}.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0)
1
2
3
4
5
6
7
8
9
10
11
12
13

弹性布局

基本概念

弹性布局（Flex）提供更加有效的方式对容器中的子元素进行排列、对齐和分配剩余空间。容器默认存在主轴与交叉轴，子元素默认沿主轴排列，子元素在主轴方向的尺寸称为主轴尺寸，在交叉轴方向的尺寸称为交叉轴尺寸。

布局方向

在弹性布局中，容器的子元素可以按照任意方向排列。通过设置参数direction，可以决定主轴的方向，从而控制子组件的排列方向。

Flex({ direction: FlexDirection.Row }) {
  Text('1').width('33%').height(50).backgroundColor(0xF5DEB3)
  Text('2').width('33%').height(50).backgroundColor(0xD2B48C)
  Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
}
.height(70)
.width('90%')
.padding(10)
.backgroundColor(0xAFEEEE)
1
2
3
4
5
6
7
8
9

主轴对齐方式

通过justifyContent参数设置在主轴方向的对齐方式。

Flex({ justifyContent: FlexAlign.xxx }) {  
  Text('1').width('20%').height(50).backgroundColor(0xF5DEB3)
  Text('2').width('20%').height(50).backgroundColor(0xD2B48C)    
  Text('3').width('20%').height(50).backgroundColor(0xF5DEB3)
}
.width('90%')
.padding({ top: 10, bottom: 10 })
.backgroundColor(0xAFEEEE)
1
2
3
4
5
6
7
8

交叉轴对齐方式

容器组件设置交叉轴对齐

可以通过Flex组件的alignItems参数设置子组件在交叉轴的对齐方式。

Flex({ alignItems: ItemAlign.xxx }) {  
  Text('1').width('33%').height(30).backgroundColor(0xF5DEB3)  
  Text('2').width('33%').height(40).backgroundColor(0xD2B48C)  
  Text('3').width('33%').height(50).backgroundColor(0xF5DEB3)
}
.size({ width: '90%', height: 80 })
.padding(10)
.backgroundColor(0xAFEEEE)
1
2
3
4
5
6
7
8

子组件设置交叉轴对齐

子组件的alignSelf属性也可以设置子组件在父容器交叉轴的对齐格式，且会覆盖Flex布局容器中alignItems配置。

Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center }) { // 容器组件设置子组件居中
  Text('alignSelf Start').width('25%').height(80)
    .alignSelf(ItemAlign.Start)
    .backgroundColor(0xF5DEB3)
  Text('alignSelf Baseline')
    .alignSelf(ItemAlign.Baseline)
    .width('25%')
    .height(80)
    .backgroundColor(0xD2B48C)
  Text('alignSelf Baseline').width('25%').height(100)
    .backgroundColor(0xF5DEB3)
    .alignSelf(ItemAlign.Baseline)
  Text('no alignSelf').width('25%').height(100)
    .backgroundColor(0xD2B48C)
  Text('no alignSelf').width('25%').height(100)
    .backgroundColor(0xF5DEB3)

}.width('90%').height(220).backgroundColor(0xAFEEEE)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18