
回复
本文将探讨 HarmonyOS 中常用的布局容器组件,如 Column
、Row
和 Grid
,并学习如何通过这些组件创建和管理界面元素。通过实际的代码示例,你将掌握这些组件的属性及其使用方式,从而能够设计出灵活且响应迅速的用户界面。
Column
是一种垂直布局容器,用于将子组件从上到下排列。以下是 Column
的属性和使用示例:
Column 组件的属性
alignItems
: 设置子项的水平对齐方式,如 Center
、Start
、End
等。justifyContent
: 设置子项的垂直分布方式,如 SpaceBetween
、Center
、Start
等。垂直线性布局示例
以下代码展示了如何创建一个简单的垂直布局,将多个文本组件垂直排列:
@Component
export struct VerticalLayoutDemo {
build() {
Column() {
Text('Item 1')
Text('Item 2')
Text('Item 3')
}
.alignItems(HorizontalAlign.Center)
.justifyContent(FlexAlign.SpaceBetween)
.width('100%')
.height('100%')
.padding(10)
}
}
预览效果:
Row
是一种水平布局容器,用于将子组件从左到右排列。以下是 Row
的属性和使用示例:
Row 组件的属性
alignItems
: 设置子项的垂直对齐方式,如 Center
、Start
、End
等。justifyContent
: 设置子项的水平分布方式,如 SpaceAround
、Center
、Start
等。水平线性布局示例
以下代码展示了如何创建一个简单的水平布局,将多个文本组件水平排列:
@Component
export struct HorizontalLayoutDemo {
build() {
Row() {
Text('Item 1')
Text('Item 2')
Text('Item 3')
}
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.SpaceAround)
.width('100%')
.height('100%')
.padding(10)
}
}
预览效果:
Grid
是一种网格布局容器,适用于需要在行和列中排列多个子项的场景。以下是 Grid
和 GridItem
的属性和使用示例:
Grid 组件的属性
columnsTemplate
: 定义列的布局模板,例如 1fr 1fr
表示两个等宽列。rowsTemplate
: 定义行的布局模板,例如 1fr 1fr
表示两行。网格布局示例
下面的代码展示了如何创建一个两行两列的网格布局:
@Component
export struct GridLayoutDemo {
@State items: string[] = ['Item 1', 'Item 2', 'Item 3', 'Item 4']
build() {
Grid() {
ForEach(this.items, (item: string) => {
GridItem() {
Text(item)
.fontSize(16)
.backgroundColor(0xF9CF93)
.width('100%')
.height('100%')
.textAlign(TextAlign.Center)
}
}, (item: string) => item)
}
.columnsTemplate('1fr 1fr')
.rowsTemplate('1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.width('100%')
.height(200)
.backgroundColor(0xFAEEE0)
.margin({ top: 5 })
}
}
预览效果: