HarmonyOS 容器组件(Column Row Flex)

今天我们来说容器组件中的 Column Row Flex

Column 我们应该比较熟了之前用了很多了
是一个列容器

老规矩先来一个组件骨架

@Entry
@Component
struct Index {

  build() {
    Column({space: 30}) {

    }
    .width('100%')
    .height('100%')
  }
}

我们在中的 Column 元素中加入代码

Column() {
	Column()
	   .width(150)
	   .height(50)
	   .backgroundColor(Color.Blue)
	 Column()
	   .width(150)
	   .height(50)
	   .backgroundColor(Color.Yellow)
}
.border({width: 1,color: Color.Red})
.width('80%')
.height(300)
.margin({top: 30})

这里我们写了个Column列元素然后样式为红色边框高度 300pv 宽度百分之八十给了一点上边距
然后里面放了两个带有高宽和颜色样式的 Column元素
运行结果如下
在这里插入图片描述
由此得出结论 Column 内的子元素会成列排序
目前我们可以看到它的排列方式为从上至下左右居中
那么我们可以看一下它其他的排列方式

我们还是鼠标停在组件上出现提示后点击进入API
在这里插入图片描述
有一个参数 space 数字或者字符串类型控制自己的子元素之间间隔的距离这个我们用烂了都

属性介绍是重点 alignItems 控制自己子组件水平方向简单说就是从左到右方向对齐方式类型是
HorizontalAlign
这个对象的默认是Center 居中
justifyContent 控制自己的子元素垂直方向简单说从上往下方向对齐方式
FlexAlign
对象类型默认值是Start 从上往下在这里插入图片描述
我们打出 alignItems(HorizontalAlign.); 就会出现主要的三个提示

我们先用 Start 就变成从左至右了

Center 就是我们默认的居中效果

最后 End 右对齐

然后当我们在下面属性打出 .justifyContent(FlexAlign.)

默认就是 Start
从上到下
在这里插入图片描述
Center 垂直方向居中

End 底部对齐

SpaceBetween 这个比较有趣
两端对齐

SpaceAround 依旧是两端对齐的一个主效果但是不贴边了

SpaceEvenly 内部所有子元素的讲个相同简单说距离平均分配
然后第一个元素与顶部和最后一个元素与底部的距离为所有元素边距的一半
在这里插入图片描述
然后我们来说 Row
我们将 Column 中的代码改成

Row() {
	Column()
	   .width(100)
	   .height(50)
	   .backgroundColor(Color.Blue)
	 Column()
	   .width(100)
	   .height(50)
	   .backgroundColor(Color.Yellow)
}
.border({width: 1,color: Color.Red})
.width('80%')
.height(300)
.margin({top: 30})

Row 是以行沾水子组件布局的
在这里插入图片描述
来看他的属性鼠标贴上去打开API

参数还是这个 space 字符串或者数字设置子元素间距

属性上依旧是 alignItems 和 justifyContent
但是反过来了
alignItems VerticalAlign对象类型控制子元素垂直方向对齐默认 Center 居中
justifyContent FlexAlign类型控制子元素水平方向对齐方式默认 Start 左对齐
在这里插入图片描述
先在 Row 组件属性上 .alignItems(VerticalAlign.)
它就会2提示出三个属性
Center 是默认的就不看了

Top 垂直方向上对齐

Bottom 顶部对齐

然后我们在 Row组件下属性输入 justifyContent(FlexAlign.)
也是有六个配置项
在这里插入图片描述
Center 水平方向居中

End 右对齐

SpaceBetween SpaceAround SpaceEvenly 和上面Column效果都是一样的只是一个是垂直一个是水平方向

那么最后我们来看 Flex
我们将 Column 下面的代码改成

Flex() {
	Column()
	   .width(100)
	   .height(50)
	   .backgroundColor(Color.Blue)
	 Column()
	   .width(100)
	   .height(50)
	   .backgroundColor(Color.Yellow)
}
.border({width: 1,color: Color.Red})
.width('80%')
.height(300)
.margin({top: 30})

运行如下
在这里插入图片描述
这里先给大家看个比较好玩的东西首先大家看到这个行显示会觉得这个Row不是实现了吗？
但是如果元素超出了Row的宽度他就超出去了
但是 flex可以这样

装不下就往里呀

好啦我们鼠标移入flex组件查看API
在这里插入图片描述
首先它告诉我们 flex 会进行二次布局会消耗性能如果对性能要求非常高建议使用 Column以及Row代替

flex是可以通过属性设置主轴的 Row的主轴是水平方向 Column的主轴是垂直方向
而如果你不设置主轴比如宽高 Column以及Row 会按子元素伸开简单说子元素加起来多大他们主轴就多大而 flex 会默认把父元素这条线的可用空间占满
在这里插入图片描述
那么参数
direction 控制子组件在容器中排列的方向 FlexDirection对象类型不必填它也控制主轴的方向简单说他控制自己的字内容是行排序还是列排序然后切换时主轴也会切换
wrap FlexWrap对象类型控制是否可以换行默认是NoWrap 超出不允许换行
justifyContent和alignItems 这和我们之前讲的一个意思主要看direction主轴设置的啥如果是行那就和Row的一样列自然就和Column的一样根据主轴来的
alignContent 因为 Column和Row 超出也是不允许换行换列的但是 flex因为wrap的存在超出可以换那么这个就是用来控制多行多列的一个对齐方式的
在这里插入图片描述
好多说不益我们上代码演示

我们先输入

Flex({
  direction: FlexDirection.
}) {

他就会弹出提示
在这里插入图片描述
它有四个配置项
Row 默认的一个效果行展示主轴水平方向从左至右

RowReverse 也是行展示主轴水平方向但是是从右至左

Column 从上至下主轴垂直方向

ColumnReverse 也是列展示主轴垂直方向从下至上
在这里插入图片描述
justifyContent和alignItems 大家可以自己去看还是那句话和我们之前讲的一个意思主要看direction主轴设置的啥如果是行那就和Row的一样列自然就和Column的一样根据主轴来的
不过其中除了居中居某个边两端其他还是有所变化大家可以打出某某类. 他就会弹出提示我们可以一个一个去看效果

这里我们这样写

Flex({
	direction: FlexDirection.ColumnReverse,
	alignItems: ItemAlign.Center,
	justifyContent: FlexAlign.Center
}) {

两轴同时居中
在这里插入图片描述
这个大家可以根据提示都去试一下各个对齐方式和不同主轴的情况下

wrap 我们可以将代码写成这样

Flex({
wrap: FlexWrap.NoWrap
}) {
	Column()
	 .width(100)
	 .height(50)
	 .backgroundColor(Color.Blue)
	Column()
	 .width(100)
	 .height(50)
	 .backgroundColor(Color.Yellow)
	Column()
	 .width(100)
	 .height(50)
	 .backgroundColor(Color.Blue)
	Column()
	 .width(100)
	 .height(50)
	 .backgroundColor(Color.Yellow)
	Column()
	 .width(100)
	 .height(50)
	 .backgroundColor(Color.Blue)
	Column()
	 .width(100)
	 .height(50)
	 .backgroundColor(Color.Yellow)
}
.border({width: 1,color: Color.Red})
.width('80%')
.height(300)
.margin({top: 30})

FlexWrap.NoWrap是默认值超出就直接拉伸往里压
在这里插入图片描述
Wrap 允许超出换行

但是这里我们多个元素贴在一起看着好奇怪改成这样

@Entry
@Component
struct Index {

  build() {
    Column({space: 30}) {
      Flex({
        wrap: FlexWrap.Wrap
      }) {
        Column()
          .width(100)
          .height(50)
          .backgroundColor(Color.Blue)
        Column()
          .width(100)
          .height(50)
          .backgroundColor(Color.Yellow)
        Column()
          .width(100)
          .height(50)
          .backgroundColor(Color.Gray)
        Column()
          .width(100)
          .height(50)
          .backgroundColor(Color.Pink)
        Column()
          .width(100)
          .height(50)
          .backgroundColor(Color.Green)
        Column()
          .width(100)
          .height(50)
          .backgroundColor(Color.Brown)
      }
      .border({width: 1,color: Color.Red})
      .width('80%')
      .height(300)
      .margin({top: 30})

    }
    .width('100%')
    .height('100%')
  }
}