当前位置：首页 > article >正文

【鸿蒙应用开发】常见的容器组件：ColumnSplit、RowSplit和Flex

article 2025/2/1 13:10:39

上一章已经了解了Column和Row的一些属性，以下是几个案例：

设置子组件水平方向的间距为：5

@Entry
@Preview
@Component
struct Index {
  @State message: string = 'Hello 鸿蒙';
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Row({ space: 5 }) {
        Row()
          .width("30%")
          .height(50)
          .backgroundColor("red")
        Row()
          .width("30%")
          .height(50)
          .backgroundColor("blue")
      }
      .width("90%")
      .height('100%')
      .border({ width: 1 })

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

效果如图所示：
在这里插入图片描述

设置子元素垂直方向上的对齐方式：

@Entry
@Preview
@Component
struct Index {
  @State message: string = 'Hello 鸿蒙';
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Row({ space: 5 }) {
        Row()
          .width("30%")
          .height(50)
          .backgroundColor("red")
        Row()
          .width("30%")
          .height(50)
          .backgroundColor("blue")
      }
      .width("90%")
      .height('100%')
      .border({ width: 1 })
      .alignItems(VerticalAlign.Center)
    }
    .height('100%')
    .width('100%')
  }
}

效果如图所示：

在这里插入图片描述
其他的对齐方式，选择对应的属性即可。

ColumnSplit和RowSplit

ColumnSplit和RowSplit是在每一个子组件之间插入一条分隔线，ColumnSplit是横向分隔线，RowSplit是纵向的分隔线。

RowSplit使用方法如下：

@Entry
@Preview
@Component
struct Index {
  @State message: string = 'Hello 鸿蒙';
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      RowSplit(){
        Text("1")
          .width(100)
          .height(30)
          .backgroundColor(0xF5DEB3)
        Text("1")
          .width(100)
          .height(30)
          .backgroundColor(0xF5DEB3)
        Text("1")
          .width(100)
          .height(30)
          .backgroundColor(0xF5DEB3)
      }
      .resizeable(true) // 是否可拖动
      .width("90%").height(400)
    }
    .height('100%')
    .width('100%')
  }
}

效果如图：在这里插入图片描述
ColumnSplit的用法也是类似的。

Flex

Flex组件是以弹性方式布局子元素，标准的Flex布局容器包含以下参数：

direction：子组件在 flex 容器上排列的方向，也就是主轴方向。
wrap：Flex 容器以单行/列还是多行/列排列。
justifyContent：子组件在 Flex 容器主轴上的对齐格式
alignItems：子组件在 Flex 容器交叉轴的对齐方式
alignContent：交叉轴上有额外空间的时候，多行内容的对齐方式，只有在 wrap 为Wrap或WrapReverse时生效。

比如：

      Flex({direction:FlexDirection.Row}){
        Text("1").width(100).height(40).backgroundColor(0xF5DEB3)
        Text("1").width(100).height(40).backgroundColor(0xF5DEB3)
        Text("1").width(100).height(40).backgroundColor(0xF5DEB3)
        Text("1").width(100).height(40).backgroundColor(0xF5DEB3)
      }