1. Row

容器组件,行组件

他里面可以包裹其它的组件,以及容器

表示一个横向的一个布局,再此容器内的所有组件,均有横向排列,不支持换行

使用方法,直接再build函数内使用,或者再容器组件内使用

该组件大括号里面可以放置其他组件,并进行显示

如何设置Row组件中的方向朝向

我们可以给Row租价设置有一个属性叫做.direction(),它里面可以传入一个Direction的枚举,可以控制元素的朝向

例如.direction(Direction.Rtl)        就是往右边转动的

然后他想要调节高度的话,就可以使用height属性进行高度的调节

如果他想要调节宽度的话,就需要用到width属性进行调节,这些属性的使用方法,很简单,只需要,再他括号里面写宽度是多少即可

如果想要设置背景颜色的话,我们还可以使用.backgroundColor这个属性来进行设置,然后他里面需要传入一个Color的一个枚举

使用示例

@Entry
@Component
struct RowCSDN01 {

  build() {
    Row({space:20}){  //容器组件
      Row()
        .width(150)
        .height(150)
        .backgroundColor(Color.Black)
      Row()
        .width(150)
        .height(150)
        .backgroundColor(Color.White)

    }
    .direction(Direction.Auto)  //设置排列方向
    .backgroundColor(Color.Pink)  //设置颜色
    .width("100%")  //设置宽度
    .height("100%") //设置高度
  }
}

使用效果展示

更多推荐