HarmonyOS 鸿蒙Next 为什么我这样无法实现2*2的布局？
HarmonyOS 鸿蒙Next 为什么我这样无法实现2*2的布局？
这样那里有问题？为什么实现不了像商品展示那样的2*2的布局，就像淘宝商品展示那样的。
15 回复
方案一
```javascript
// [@Entry](/user/Entry) 注解标识此结构体为应用程序的入口点
[@Component](/user/Component)
// 定义名为“demo”的结构体组件
struct demo {
// build 方法负责构建组件的UI布局
build() {
// 创建一个Flex布局容器，方向为水平（Row），居中对齐（Center），内容换行（Wrap）
Flex({
direction: FlexDirection.Row,
justifyContent: FlexAlign.Center,
alignItems: ItemAlign.Center,
wrap: FlexWrap.Wrap
}) {
// 第一个Stack容器，包含图片背景和文字信息
Stack() {
// 图片占位符，设置宽高、背景色、圆角
Image('')
.width('100%').height('100%')
.backgroundColor("#ff0000")
.borderRadius(10)
// 文字列，包含两行文本，设置字体颜色、大小及外边距
Column() {
Text('排行榜')
.fontColor("#ffffff")
.fontSize('30lpx')
.margin({ top: '10lpx', left: '10lpx' })
Text('夏门站，我们不见不散')
.fontColor("#ffffff")
.fontSize('20lpx')
.margin({ top: '10lpx', left: '10lpx' })
}
// 文字列内部水平居左对齐
.alignItems(HorizontalAlign.Start)
// 设置Stack内部组件的宽高为100%
.width('100%').height('100%')
}
// 设置Stack容器的宽高及外边距
.width('320lpx').height('200lpx')
.margin('5lpx')
// 同样的逻辑，创建第二个Stack容器，包含不同背景色和文本内容
Stack() {
Image('')
.width('100%').height('100%')
.backgroundColor("#f00f3f")
.borderRadius(10)
Column() {
Text('新品首发').fontColor("#ffffff").fontSize('30lpx').margin({ top: '10lpx', left: '10lpx' })
Text('夏门站，我们不见不散').fontColor("#ffffff").fontSize('20lpx').margin({ top: '10lpx', left: '10lpx' })
}
.alignItems(HorizontalAlign.Start)
.width('100%')
.height('100%')
}.width('320lpx').height('200lpx')
.margin('5lpx')
// 同样的逻辑，创建第三个Stack容器，包含不同背景色和文本内容
Stack() {
Image('')
.width('100%').height('100%')
.backgroundColor("#0000ff")
.borderRadius(10)
Column() {
Text('大牌闪购').fontColor("#ffffff").fontSize('30lpx').margin({ top: '10lpx', left: '10lpx' })
Text('更多大牌').fontColor("#ffffff").fontSize('20lpx').margin({ top: '10lpx', left: '10lpx' })
}
.alignItems(HorizontalAlign.Start)
.width('100%')
.height('100%')
}.width('320lpx').height('200lpx')
.margin('5lpx')
// 同样的逻辑，创建第四个Stack容器，包含不同背景色和文本内容
Stack() {
Image('')
.width('100%').height('100%')
.backgroundColor("#f00ff0")
.borderRadius(10)
Column() {
Text('发现好物').fontColor("#ffffff").fontSize('30lpx').margin({ top: '10lpx', left: '10lpx' })
Text('夏门站，我们不见不散').fontColor("#ffffff").fontSize('20lpx').margin({ top: '10lpx', left: '10lpx' })
}
.alignItems(HorizontalAlign.Start)
.width('100%')
.height('100%')
}.width('320lpx').height('200lpx')
.margin('5lpx')
}
// 设置Flex容器的宽高、背景色
.width('100%').height('720lpx').backgroundColor("#fafafa")
}
}
方案二
// 定义DataBean类，用于存储卡片数据
class DataBean {
title_1: string = '' // 卡片主标题
title_2: string = '' // 卡片副标题
color: string = '' // 卡片背景颜色
}
[@Component](/user/Component)
// 定义名为“demo”的结构体组件
struct demo {
// 使用[@State](/user/State)装饰器声明状态变量dataArr，存储一组DataBean对象，用于生成卡片布局
[@State](/user/State) dataArr: Array<DataBean> = [
{
title_1: '排行榜',
title_2: '夏门站，我们不见不散',
color: '#ff0000'
},
{
title_1: '新品首发',
title_2: '夏门站，我们不见不散',
color: '#f00f3f'
},
{
title_1: '大牌闪购',
title_2: '更多大牌',
color: '#0000ff'
},
{
title_1: '发现好物',
title_2: '夏门站，我们不见不散',
color: '#f00ff0'
}
]
// build 方法负责构建组件的UI布局
build() {
// 创建一个Flex布局容器，方向为水平（Row），居中对齐（Center），内容换行（Wrap）
Flex({
direction: FlexDirection.Row,
justifyContent: FlexAlign.Center,
alignItems: ItemAlign.Center,
wrap: FlexWrap.Wrap
}) {
// 使用ForEach遍历dataArr中的DataBean对象，为每个对象生成一个Stack卡片布局
ForEach(this.dataArr, (item: DataBean, index: number) => {
Stack() {
// 图片占位符，设置宽高、背景色、圆角，背景色从DataBean对象中取值
Image('')
.width('100%').height('100%')
.backgroundColor(item.color)
.borderRadius(10)
// 文字列，包含两行文本，从DataBean对象中取值，设置字体颜色、大小及外边距
Column() {
Text(item.title_1)
.fontColor("#ffffff")
.fontSize('30lpx')
.margin({ top: '10lpx', left: '10lpx' })
Text(item.title_2)
.fontColor("#ffffff")
.fontSize('20lpx')
.margin({ top: '10lpx', left: '10lpx' })
}
// 文字列内部水平居左对齐
.alignItems(HorizontalAlign.Start)
// 设置Stack内部组件的宽高为100%
.width('100%').height('100%')
}
// 设置Stack容器的宽高及外边距
.width('320lpx').height('200lpx')
.margin('5lpx')
})
}
// 设置Flex容器的宽高、背景色
.width('100%').height('720lpx').backgroundColor("#fafafa")
}
}
更多关于HarmonyOS 鸿蒙Next 为什么我这样无法实现2*2的布局？的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html
不要foreach，就是这样的，代码太长了，而且很多重复。这个不算错误，只是不美观。
@Entry
@Component
struct Page35 {
@State list: Array<number> = [1, 2, 3, 4,5,6,7]
build() {
Column() {
Grid() {
GridItem() {
Column() {
}
.width('100%')
.height(150)
.borderRadius(15)
.backgroundColor('#eeeeee')
}
GridItem() {
Column() {
}
.width('100%')
.height(150)
.borderRadius(15)
.backgroundColor('#eeeeee')
}
GridItem() {
Column() {
}
.width('100%')
.height(150)
.borderRadius(15)
.backgroundColor('#eeeeee')
}
GridItem() {
Column() {
}
.width('100%')
.height(150)
.borderRadius(15)
.backgroundColor('#eeeeee')
}
}
.columnsGap(10)
.rowsGap(15)
.columnsTemplate('1fr 1fr')
.margin(10)
}
.width('100%')
.height('100%')
}
}
@Entry
@Component
struct Page35 {
@State list: Array<number> = [1, 2, 3, 4]
build() {
Column() {
Grid() {
ForEach(this.list, () => {
GridItem() {
Column() {}
.width('100%')
.height(150)
.borderRadius(15)
.backgroundColor('#eeeeee')
}
.align(Alignment.Top)
})
}
.columnsGap(10)
.rowsGap(15)
.columnsTemplate('1fr 1fr')
.margin(10)
}
.width('100%')
.height('100%')
}
}
@Entry
@Component
struct test {
build() {
Column(){
Grid(){
GridItem(){
Image($r('app.media.app_icon'))
.width(100)
.height(100)
}
GridItem(){
Image($r('app.media.app_icon'))
.width(100)
.height(100)
}
}
.rowsTemplate('1fr 1fr')
.columnsTemplate('1fr 1fr')
}
}
}
在HarmonyOS中，实现22布局通常使用GridContainer或GridLayout组件。如果你无法实现22布局，可能是以下原因：
- 组件选择错误：确保使用了
GridContainer或GridLayout，而不是其他布局组件。 - 行列设置错误：检查是否设置了正确的行数和列数。例如，
GridContainer需要设置rows和columns属性为2。 - 子组件数量不足或过多：确保在布局中添加了4个子组件，以实现2*2的布局。
- 布局属性冲突：检查子组件的布局属性是否与父布局冲突，如
width、height等。
示例代码：
<GridContainer
rows="2"
columns="2">
<Text text="1"/>
<Text text="2"/>
<Text text="3"/>
<Text text="4"/>
</GridContainer>
