ArkUI 学习之位置设置：direction（容器内主轴方向上元素的布局）

direction

direction(value: Direction)

设置容器元素内主轴方向上的布局。

！！！注意：该属性在Column组件上不生效。

 

说明：属性配置为auto的时候，按照系统语言方向进行布局。

参数：

参数名	类型	必填	说明
value	Direction	是	默认值：Direction.Auto

 

示例：

@Entry
@Component
struct TestIndex {
  build() {
    Column({space:20}){
      /** Direction.Ltr */
      Row() {
        Text('1')
          .height(50)
          .width('25%')
          .fontSize(16)
          .backgroundColor(0xF5DEB3)
          .textAlign(TextAlign.Center)
        Text('2')
          .height(50)
          .width('25%')
          .fontSize(16)
          .backgroundColor(0xD2B48C)
          .textAlign(TextAlign.Center)
        Text('3')
          .height(50)
          .width('25%')
          .fontSize(16)
          .backgroundColor(0xF5DEB3)
          .textAlign(TextAlign.Center)
        Text('4')
          .height(50)
          .width('25%')
          .fontSize(16)
          .backgroundColor(0xD2B48C)
          .textAlign(TextAlign.Center)
      }.width('90%').direction(Direction.Ltr) // 从左到右

      /** Direction.Rtl */
      Row() {
        Text('1')
          .height(50)
          .width('25%')
          .fontSize(16)
          .backgroundColor(0xF5DEB3)
          .textAlign(TextAlign.Center)
        Text('2')
          .height(50)
          .width('25%')
          .fontSize(16)
          .backgroundColor(0xD2B48C)
          .textAlign(TextAlign.Center)
        Text('3')
          .height(50)
          .width('25%')
          .fontSize(16)
          .backgroundColor(0xF5DEB3)
          .textAlign(TextAlign.Center)
        Text('4')
          .height(50)
          .width('25%')
          .fontSize(16)
          .backgroundColor(0xD2B48C)
          .textAlign(TextAlign.Center)
      }.width('90%').direction(Direction.Rtl) //从右到左

      /** Direction.Auto */
      Row() {
        Text('1')
          .height(50)
          .width('25%')
          .fontSize(16)
          .backgroundColor(0xF5DEB3)
          .textAlign(TextAlign.Center)
        Text('2')
          .height(50)
          .width('25%')
          .fontSize(16)
          .backgroundColor(0xD2B48C)
          .textAlign(TextAlign.Center)
        Text('3')
          .height(50)
          .width('25%')
          .fontSize(16)
          .backgroundColor(0xF5DEB3)
          .textAlign(TextAlign.Center)
        Text('4')
          .height(50)
          .width('25%')
          .fontSize(16)
          .backgroundColor(0xD2B48C)
          .textAlign(TextAlign.Center)
      }.width('90%').direction(Direction.Auto) //属性配置为auto的时候，按照系统语言方向进行布局。
    }.width('100%')
  }
}