HarmonyOS开发样式布局

个人简介

👨‍💻‍个人主页：魔术师

📖学习方向：主攻前端方向，正逐渐往全栈发展

🚴个人状态：研发工程师，现效力于政务服务网事业

🇨🇳人生格言： "心有多大，舞台就有多大。"

📚推荐学习： 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js 🍇鸿蒙开发

🪧使用备注：仅供学习交流严禁用于商业用途，若发现侵权内容请及时联系作者

📤更新进度：持续更新内容

🤙个人名片：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

HarmonyOS开发样式布局目录

文章目录

- 个人简介
- HarmonyOS开发样式布局目录
- 样式布局
- - [1. 基础布局](#1. 基础布局)
  - [[2. 堆叠布局（Stack）](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-stack-V5)](#2. 堆叠布局（Stack）)
  - [[3. 弹性布局](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-flex-layout-V5)](#3. 弹性布局)
  - [[4. 网格布局](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/grid-and-column-V5)](#4. 网格布局)
  - [[5. 相对布局（RelativeContainer）](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-relativecontainer-V5)](#5. 相对布局（RelativeContainer）)
  - [[6. 滚动条说明（Scroll）](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-scroll-V5)](#6. 滚动条说明（Scroll）)

样式布局

1. 基础布局

用途：用于实现垂直或水平排列的简单布局，适用于需要线性排列的场景（如导航栏、列表等）。

Column：纵向排列（从上到下）。
Row：横向排列（从左到右）。

关键属性

属性	描述
space	子组件之间的间距（单位：px）。
direction	（Row/Column的父容器）设置主轴方向（Row为水平，Column为垂直）。
width/height	容器的尺寸（支持百分比或固定值）。

纵向布局（Column）案例：

typescript 复制代码

@Entry
@Component
struct Test{
  build() {
    Column(){
      // 纵向布局（Column）
      Column({ space: 20 }) {
        Row().width('100%').height(200).backgroundColor(Color.Pink)
        Row().width('100%').height(200).backgroundColor(Color.Blue)
        Row().width('100%').height(200).backgroundColor(Color.Yellow)
      }.width('100%').height('100%')

      // // 横向布局（Row）
      // Row({ space: 20 }) {
      //   Column().width(100).height('100%').backgroundColor(Color.Pink)
      //   Column().width(100).height('100%').backgroundColor(Color.Blue)
      //   Column().width(100).height('100%').backgroundColor(Color.Yellow)
      // }.width('100%').height('100%')
    }
    .width('100%')
    .height('100%')

  }
}

横向布局（Row）案例：

typescript 复制代码

@Entry
@Component
struct Test{
  build() {
    Column(){
      // 横向布局（Row）
      Row({ space: 20 }) {
        Column().width(100).height('100%').backgroundColor(Color.Pink)
        Column().width(100).height('100%').backgroundColor(Color.Blue)
        Column().width(100).height('100%').backgroundColor(Color.Yellow)
      }.width('100%').height('100%')
    }
    .width('100%')
    .height('100%')
  }
}

Row 和Column的布局方式成为线性布局- 不是横向排列就是纵向排列

● 线性布局中永远不会产生换行

● 均不支持出现滚动条

● 横向排列的垂直居中，总行排列的水平居中

● 主轴-排列方向的轴

● 侧轴-排列方向垂直的轴

2. 堆叠布局（Stack）

用途:用于实现层叠效果，后添加的组件会覆盖前一个组件，适合需要重叠的复杂布局（如弹窗、图层叠加）。

关键属性

属性	描述
alignContent	设置子组件的对齐方式（如 Alignment.TopEnd）。
width/height	容器的尺寸（必须显式设置）。

Stack的参数可以设置子组件的排列方式alignContent

Top(顶部)
TopStart（左上角）
TopEnd（右上角）
Start（左侧）
End（右侧）
Center（中间）
Bottom（底部）
BottomStart（左下角）
BottomEnd(右下角)
案例：

typescript 复制代码

@Entry
@Component
struct Test {
  build() {
    Row() {
      Stack() {
        Text('抖音')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontColor('#ff2d83b3')
          .translate({
            x:-2,
            y:2
          })
          .zIndex(1)
        Text('抖音')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontColor('#ffe31fa9')
          .translate({
            x:2,
            y:-2
          })
          .zIndex(2)

        Text('抖音')
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .fontColor('#ff030000')
          .translate({
            x:0,
            y:0
          })
          .zIndex(3)

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

3. 弹性布局

用途：通过灵活的主轴和交叉轴对齐，适配不同屏幕尺寸和动态内容（如自适应导航栏、卡片布局）。

关键属性

属性	描述
direction	主轴方向（FlexDirection.Row 或 FlexDirection.Column）。
justifyContent	主轴对齐方式（如 FlexAlign.SpaceBetween）。
alignItems	交叉轴对齐方式（如 ItemAlign.Center）。
flexGrow	子组件的拉伸权重（值越大，占据空间越多）。

案例：

typescript 复制代码

@Entry
@Component
struct Test {
  build() {
    Flex({ direction: FlexDirection.Column }){

        Column(){
          Text('一行两列')
          Flex(){
            Text('数据1')
              .width('50%')
              .backgroundColor(Color.Green)
              .textAlign(TextAlign.Center)
            Text('数据2')
              .width('50%')
              .backgroundColor(Color.Orange)
              .textAlign(TextAlign.Center)
          }
      }
        Column(){
          Text('一行一列')
          Flex({direction:FlexDirection.Column}){
            Text('数据1')
              .width('100%')
              .backgroundColor(Color.Green)
              .textAlign(TextAlign.Center)
            Text('数据2')
              .width('100%')
              .backgroundColor(Color.Orange)
              .textAlign(TextAlign.Center)
          }

      }.margin({
          top:'10'
        })
    }
      .width('100%')
      .height('100%')
      .backgroundColor(Color.Pink)
  }
}

4. 网格布局

用途:通过行列划分实现复杂布局（如商品列表、仪表盘），支持响应式设计。

关键属性

属性	描述
columnsTemplate	定义列模板（如 1fr 1fr 表示两列等分）。
rowsTemplate	定义行模板（如 auto 100px）。
span	子组件跨的列数或行数（如 GridColSpan(2)）。
gutte	列与列之间的间距（如 { x: 8, y: 12 }）。

案例：

typescript 复制代码

@Entry
@Component
struct Test {
  build() {
    Grid() {
      GridItemCases()
      GridItemCases()
      GridItemCases()
      GridItemCases()
      GridItemCases()
      GridItemCases()
    }
    .width("100%")
    .height("100%")
    .columnsTemplate("1fr 1fr 1fr")
    .columnsGap(10)
    .rowsGap(10)
    .padding(10)

  }
}

@Component
struct GridItemCases {
  build() {
    GridItem() {
      Row() {
        Column() {
          Text("grid布局")
        }
        .width('100%')
      }
      .height(200)
      .borderRadius(4)
      .backgroundColor(Color.Pink)
    }

  }
}

5. 相对布局（RelativeContainer）

用途：通过锚点规则实现精准的相对定位，适合需要动态调整位置的场景（如动态弹窗、自定义表单）。

关键属性

属性	描述
alignRules	定义子组件的锚点对齐规则（需配合 id 使用）。
id	子组件的唯一标识（必须设置）。
container	参与相对布局的容器内组件若被设备锚点，需要设置id，否则不显示

案例：

typescript 复制代码

@Entry
@Component
struct Test {
  build() {
    RelativeContainer() {
      RelativeContainer() {
        Row(){}
        .width('33%')
        .aspectRatio(1)
        .alignRules({
          top: { anchor: '__container__', align: VerticalAlign.Top },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .backgroundColor(Color.Red)
        Row(){}
        .width('33%')
        .aspectRatio(1)
        .alignRules({
          bottom: { anchor: '__container__', align: VerticalAlign.Bottom },
          middle: { anchor: '__container__', align: HorizontalAlign.Center }
        })
        .backgroundColor(Color.Yellow)
        Row(){}
        .width('33%')
        .aspectRatio(1)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          left: { anchor: '__container__', align: HorizontalAlign.Start }
        })
        .backgroundColor(Color.Blue)
        .zIndex(2)
        Row(){}
        .width('33%')
        .aspectRatio(1)
        .alignRules({
          center: { anchor: '__container__', align: VerticalAlign.Center },
          right: { anchor: '__container__', align: HorizontalAlign.End }
        })
        .backgroundColor(Color.Green)
      }
      .width('60%')
      .aspectRatio(1)
      .backgroundColor(Color.Pink)
      .alignRules({
        center: { anchor: '__container__', align: VerticalAlign.Center },
        middle: { anchor: '__container__', align: HorizontalAlign.Center }
      })
    }
    .height('100%')
    .width('100%')
    .id('firstContainer')
    .backgroundColor(Color.Gray)
  }
}

6. 滚动条说明（Scroll）

用途：实现可滚动区域，适用于内容超出容器大小的场景（如长列表、图文详情页）。

关键属性

属性	描述
scrollDirection	滚动方向（ScrollDirection.Vertical 或 ScrollDirection.Horizontal）。
bounce	是否允许弹性回弹（默认 true）。
overscroll	是否允许滚动超出边界时的阴影效果（默认 true）。