HarmonyOS开发样式布局

个人简介

👨‍💻‍个人主页： 魔术师
📖学习方向： 主攻前端方向，正逐渐往全栈发展
🚴个人状态： 研发工程师，现效力于政务服务网事业
🇨🇳人生格言： “心有多大，舞台就有多大。”
📚推荐学习： 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js 🍇鸿蒙开发
🪧使用备注：仅供学习交流 严禁用于商业用途 ，若发现侵权内容请及时联系作者
📤更新进度：持续更新内容
🤙个人名片：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

HarmonyOS开发样式布局目录

---

---

样式布局

1. 基础布局

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

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

关键属性

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

• 纵向布局（Column）案例：
  

@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）案例：

@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(右下角)

• 案例：
  

@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	子组件的拉伸权重（值越大，占据空间越多）。

案例：

@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 }）。

案例：

@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，否则不显示

案例：

@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）。