HarmonyOS开发样式布局
个人简介
👨💻个人主页： 魔术师
📖学习方向： 主攻前端方向，正逐渐往全栈发展
🚴个人状态： 研发工程师，现效力于政务服务网事业
🇨🇳人生格言： “心有多大，舞台就有多大。”
📚推荐学习： 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js 🍇鸿蒙开发
🪧使用备注：仅供学习交流 严禁用于商业用途 ，若发现侵权内容请及时联系作者
📤更新进度：持续更新内容
🤙个人名片：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧
HarmonyOS开发样式布局目录
文章目录
- 个人简介
- HarmonyOS开发样式布局目录
- 样式布局
- 1. 基础布局
- [2. 堆叠布局（Stack）](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-stack-V5)
- [3. 弹性布局](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-flex-layout-V5)
- [4. 网格布局](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/grid-and-column-V5)
- [5. 相对布局（RelativeContainer）](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-relativecontainer-V5)
- [6. 滚动条说明（Scroll）](https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-scroll-V5)
样式布局
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）。 |