鸿蒙应用开发基础——三种容器组件

.层叠布局

Stack容器组件

1.Stack作为容器，容器内的子元素（子组件）的顺序为Item1->Item2->Item3。

2.tack组件通过alignContent参数实现位置的相对移动

Stack容器内元素的对齐方式有以下九种：

TopStart：为左上对齐

Top：为顶部对齐

TopEnd：为右上对齐

Start：为左对齐

Center：为居中对齐

End：为右对齐

BottomStart：为左下对齐

Bottom：下对齐

BottomEnd：为右下对齐

3. Z序控制

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

示例：

@Entry

@Component

struct Index {

  @State message: string = 'Hello World'



  build() {

   Stack({alignContent:Alignment.Center}){

     Row().backgroundColor(Color.Red).width(300).height(300).zIndex(1)

     Row().backgroundColor(Color.Green).width(200).height(200).zIndex(2)

     Row().backgroundColor(Color.Blue).width(100).height(100).zIndex(3)

   }

    .width('100%')

    .height('100%')

  }

}

 

弹性布局

Flex布局

1.基本概念;

主轴：Flex组件布局方向的轴线，子元素默认沿着主轴排列。

交叉轴：垂直于主轴方向的轴线。

2.布局方向：

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

代码：Flex({ direction: FlexDirection.xxx })

FlexDirection.Row（默认值）主轴为水平方向，子组件从起始端沿着水平方向开始排布

FlexDirection.RowReverse：主轴为水平方向，子组件从终点端沿着

FlexDirection. Row相反的方向开始排布。

FlexDirection.Column：主轴为垂直方向，子组件从起始端沿着垂直方向开始排布。FlexDirection.ColumnReverse：主轴为垂直方向，子组件从终点端沿着

FlexDirection. Column相反的方向开始排布。

示例：

build() {
    Flex({ direction: FlexDirection.RowReverse }) {
      Text('item1').backgroundColor(Color.Red).width(100).height(100)
      Text('item2').backgroundColor(Color.Green).width(100).height(100)
      Text('item3').backgroundColor(Color.Blue).width(100).height(100)
    }
    .width('100%')
    .height('100%')
  }
}

布局换行

wrap属性控制当子元素主轴尺寸之和大于容器主轴尺寸时，Flex是单行布局还是多行布局。

Flex({ wrap: FlexWrap.xxx })

FlexWrap. NoWrap（默认值）：不换行。如果子组件的宽度总和大于父元素的宽度，则子组件会被压缩宽度。

FlexWrap. Wrap：换行，每一行子组件按照主轴方向排列。

FlexWrap. WrapReverse：换行，每一行子组件按照主轴反方向排列。

示例：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Flex({ wrap: FlexWrap.Wrap }) {
      Text('item1').width('50%').height(100).backgroundColor(Color.Red)
      Text('item2').width('50%').height(100).backgroundColor(Color.Green)
      Text('item3').width('50%').height(100).backgroundColor(Color.Blue)
    }
    .width('100%')
    .height('100%')
  }
}

主轴对齐方式

Flex({ justifyContent: FlexAlign.xxx })

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

FlexAlign.Start（默认值）：子组件在主轴方向起始端对齐， 第一个子组件与父元素边沿对齐，其他元素与前一个元素对齐。

FlexAlign.Center：子组件在主轴方向居中对齐。

FlexAlign.End：子组件在主轴方向终点端对齐, 最后一个子组件与父元素边沿对齐，其他元素与后一个元素对齐。

FlexAlign.SpaceBetween：Flex主轴方向均匀分配弹性元素，相邻子组件之间距离相同。第一个子组件和最后一个子组件与父元素边沿对齐。

FlexAlign.SpaceAround：Flex主轴方向均匀分配弹性元素，相邻子组件之间距离相同。第一个子组件到主轴起始端的距离和最后一个子组件到主轴终点端的距离是相邻元素之间距离的一半。

FlexAlign.SpaceEvenly：Flex主轴方向元素等间距布局，相邻子组件之间的间距、第一个子组件与主轴起始端的间距、最后一个子组件到主轴终点端的间距均相等。

示例：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Flex({justifyContent:FlexAlign.SpaceEvenly}) {
      Text('item1').width('20%').height(100).backgroundColor(Color.Red)
      Text('item2').width('20%').height(100).backgroundColor(Color.Green)
      Text('item3').width('20%').height(100).backgroundColor(Color.Blue)
    }
    .width('100%')
    .height('100%')
  }
}

交叉轴对齐方式

Flex({ alignItems: ItemAlign.xxx })

容器和子元素都可以设置交叉轴对齐方式，且子元素设置的对齐方式优先级较高。

ItemAlign.Auto：使用Flex容器中默认配置。

ItemAlign.Start：交叉轴方向首部对齐。

ItemAlign.Center：交叉轴方向居中对齐。

ItemAlign.End：交叉轴方向底部对齐。

ItemAlign.Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。

ItemAlign. Baseline：交叉轴方向文本基线对齐。

示例：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.SpaceEvenly,alignItems:ItemAlign.Center}) {
      Text('item1').width('20%').height(100).backgroundColor(Color.Red)
      Text('item2').width('20%').height(100).backgroundColor(Color.Green)
      Text('item3').width('20%').height(100).backgroundColor(Color.Blue)
    }
    .width('100%')
    .height('100%')
  }
}

子组件设置交叉轴对齐

       容器和子元素都可以设置交叉轴对齐方式，且子元素设置的对齐方式优先级较高。

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

       Flex({ alignItems: ItemAlign.xxx })

       ItemAlign.Auto：使用Flex容器中默认配置。

ItemAlign.Start：交叉轴方向首部对齐。

ItemAlign.Center：交叉轴方向居中对齐。

ItemAlign.End：交叉轴方向底部对齐

ItemAlign.Stretch：交叉轴方向拉伸填充，在未设置尺寸时，拉伸到容器尺寸。

ItemAlign. Baseline：交叉轴方向文本基线对齐。

示例：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.SpaceEvenly,alignItems:ItemAlign.Baseline}) {
      Text('item1').width('20%').height(100).backgroundColor(Color.Red)
      Text('item2').width('20%').height(90).backgroundColor(Color.Green)
      Text('item3').width('20%').height(80).backgroundColor(Color.Blue)
    }
    .width('100%')
    .height('100%')
  }
}

子组件设置交叉轴对齐

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

示例：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Flex({direction:FlexDirection.Row,justifyContent:FlexAlign.SpaceEvenly,alignItems:ItemAlign.Center}) {
      Text('item1').width('20%').height(100).backgroundColor(Color.Red)
        .alignSelf(ItemAlign.Start)
      Text('item2').width('20%').height(100).backgroundColor(Color.Green)
      Text('item4').width('20%').height(100).backgroundColor(Color.Gray)
      Text('item5').width('20%').height(100).backgroundColor(Color.Yellow)
        .alignSelf(ItemAlign.Baseline)
      Text('item6').width('20%').height(60).backgroundColor(Color.Pink)
        .alignSelf(ItemAlign.Baseline)
      Text('item3').width('20%').height(100).backgroundColor(Color.Blue)
        .alignSelf(ItemAlign.End)
    }
    .width('100%')
    .height('100%')
  }
}

内容对齐

可以通过alignContent参数设置子组件各行在交叉轴剩余空间内的对齐方式，只在多行的flex布局中生效

Flex({ alignContent: FlexAlign.xxx })

FlexAlign.Start：子组件各行与交叉轴起点对齐。

FlexAlign.Center：子组件各行在交叉轴方向居中对齐。

FlexAlign.End：子组件各行与交叉轴终点对齐。

FlexAlign.SpaceBetween：子组件各行与交叉轴两端对齐，各行间垂直间距平均分布。

FlexAlign.SpaceAround：子组件各行间距相等，是元素首尾行与交叉轴两端距离的两倍。

FlexAlign.SpaceEvenly: 子组件各行间距，子组件首尾行与交叉轴两端距离都相等。

示例：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Flex({justifyContent:FlexAlign.SpaceBetween,wrap:FlexWrap.Wrap,alignContent:FlexAlign.SpaceAround}) {
      Text('item1').width('20%').height(100).backgroundColor(Color.Red)
      Text('item2').width('30%').height(100).backgroundColor(Color.Green)
      Text('item3').width('40%').height(100).backgroundColor(Color.Blue)
      Text('item4').width('20%').height(100).backgroundColor(Color.Yellow)
      Text('item5').width('40%').height(100).backgroundColor(Color.Pink)
      Text('item6').width('30%').height(100).backgroundColor(Color.Grey)
    }
    .width('100%')
    .height('100%')
  }
}

自适应拉伸

在弹性布局父组件尺寸不够大的时候，通过子组件的下面几个属性设置其在父容器的占比，达到自适应布局能力。

flexBasis：设置子组件在父容器主轴方向上的基准尺寸。如果设置了该值，则子项占用的空间为设置的值；如果没设置该属性，那子项的空间为width/height的值。

flexGrow：设置父容器的剩余空间分配给此属性所在组件的比例。用于“瓜分”父组件的剩余空间。

flexShrink: 当父容器空间不足时，子组件的压缩比例。

示例：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    Flex() {
      Text('item1').flexGrow(2).width(100).height(100).backgroundColor(Color.Red)

      Text('item2').flexGrow(3).width(100).height(100).backgroundColor(Color.Green)

      Text('item3').width(100).height(100).backgroundColor(Color.Blue)
    }.width(420)
    .height(120)
    .padding(10)
    .backgroundColor(Color.Gray)

  }
}

1. 相对布局

1.概述：

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

2. 基本概念

锚点：通过锚点设置当前元素基于哪个元素确定位置。

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

1. 设置依赖关系

锚点设置是指设置子元素相对于父元素或兄弟元素的位置依赖关系。在水平方向上，可以设置left、middle、right的锚点。在竖直方向上，可以设置top、center、bottom的锚点。为了明确定义锚点，必须为RelativeContainer及其子元素设置ID，用于指定锚点信息。ID默认为“__container__”，其余子元素的ID通过id属性设置。未设置ID的子元素在RelativeContainer中不会显示。

1. 设置相对去锚点的对齐位置

在水平方向上，对齐位置可以设置为HorizontalAlign.Start、HorizontalAlign.Center、HorizontalAlign.End。

在竖直方向上，对齐位置可以设置为：VerticalAlign.Top、VerticalAlign.Center、VerticalAlign.Bottom。

示例：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    RelativeContainer() {
      Row().backgroundColor(Color.Red).width(100).height(100).id('row1')
      Row().backgroundColor(Color.Blue).width(100).height(100).id('row2')
        .alignRules({
          right:{anchor:'__container__',align:HorizontalAlign.End},
          center:{anchor:'__container__',align:VerticalAlign.Center}
        })
      Row().backgroundColor(Color.Green).width(100).height(100).id('row3')
        .alignRules({
          bottom:{anchor:'__container__',align:VerticalAlign.Bottom},
          middle:{anchor:'__container__',align:HorizontalAlign.Center}
        })
    }.width('100%')
    .height('100%')

  }
}

1. 以子元素为锚点

示例：

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'

  build() {
    RelativeContainer() {
      Row().backgroundColor(Color.Red).width(100).height(100).id('row1')
        .alignRules({
          middle:{anchor:'__container__',align:HorizontalAlign.Center},
          center:{anchor:'__container__',align:VerticalAlign.Center}
        })
      Row().backgroundColor(Color.Blue).width(100).height(100).id('row2')
        .alignRules({
          left:{anchor:'row1',align:HorizontalAlign.End},
          top:{anchor:'row1',align:VerticalAlign.Top}
        }).margin({
          left:15
      })
      Row().backgroundColor(Color.Green).width(100).height(100).id('row3')
        .alignRules({
          top:{anchor:'row2',align:VerticalAlign.Bottom},
          left:{anchor:'row2',align:HorizontalAlign.Start}
        }).margin({
          left:15,
          top:15
      })
    }.width('100%')
    .height('100%')

  }
}