HarmonyOS 开发探索： ArkUI常用样式布局

 ArkUI布局简介

ArkUI支持多种布局方式，包括但不限于Column、Row、Stack、Flex等。这些布局方式能够满足不同的UI设计需求，帮助开发者高效地创建复杂的界面。

1. Column布局

Column布局用于垂直排列子组件，适用于需要纵向排列元素的场景。它在创建列表、表单等界面时非常实用。

@Entry
@Component
struct test1 {
  build() {
    Column() {
      ColumnExample()
    }
  }
}

@Component
struct ColumnExample {
  build() {
    Column() {
      Text('Item 1').fontSize(24)
      Text('Item 2').fontSize(24).margin({ top: 10 })
      Text('Item 3').fontSize(24).margin({ top: 10 })
    }
    .width('100%')
    .height('100%')
    // 左对齐
    .alignItems(HorizontalAlign.Start)
  }
}

效果

2. Row布局

Row布局用于水平排列子组件，适用于需要横向排列元素的场景。它在创建工具栏、菜单栏等界面时非常实用。

@Entry
@Component
struct test1 {
  build() {
    Column() {
      RowExample()
    }
  }
}

@Component
struct RowExample {
  build() {
    Row() {
      Text('Item 1').fontSize(24)
      Text('Item 2').fontSize(24).margin({ left: 10 })
      Text('Item 3').fontSize(24).margin({ left: 10 })
    }
    .width('100%')
    .height('100%')
    // 上对齐
    .alignItems(VerticalAlign.Top)
    .justifyContent(FlexAlign.Center)
  }
}

点击领取→【纯血版鸿蒙全套最新学习资料】（安全链接，放心点击）希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取~

3. Stack布局

Stack布局用于将子组件堆叠在一起，后添加的组件会覆盖在前一个组件之上。适用于需要重叠元素的场景，如背景图和前景内容的叠加。

@Entry
@Component
struct test1 {

  build() {
    Column() {
      StackExample()
    }
  }
}

@Component
struct StackExample {
  build() {
    Stack() {
      Image($r('app.media.w700d1q75cms'))
        .width('100%')
        .height('100%')

      Text('Overlay Text')
        .fontSize(30)
        .fontColor(Color.Red)
        .fontWeight(FontWeight.Bolder)
    }
    .width('100%')
    .height('100%')
  }
}

效果

4. Flex布局

Flex布局是一种高级布局方式，允许在主轴和交叉轴上灵活排列子组件。适用于复杂的UI布局需求，尤其在需要响应式设计时非常有效。

@Entry
&