今天使用ListItemGroup添加头部布局的时候，发现底部留下很多空白
头部布局使用的是相对布局RelativeContainer
错误代码如下：
import { CommonConstants } from "@ohos/utils/src/main/ets/common/CommonConstants";
import { DisPlayInfo } from "@ohos/utils/src/main/ets/utils/DisPlayInfo";
import { DisplayUtil } from "@pura/harmony-utils";
@ComponentV2
export struct HomePages {
displayInfo: DisPlayInfo = new DisPlayInfo()
build() {
Column() {
List() {
ListItemGroup({ header: this.homeHead() }) {
ForEach(['0', '1', '2', '3', '4'], (item: string, index: number) => {
ListItem() {
Row() {
RelativeContainer() {
Image($r('app.media.icon_home_test')).size({ width: 50, height: CommonConstants.FULL_PERCENT })
.borderRadius(8)
.id('iv_list_cover')
}.layoutWeight(1).height(CommonConstants.FULL_PERCENT)
Text('免费')
.size({ width: this.displayInfo.getWidth(48), height: this.displayInfo.getWidth(22) })
.backgroundColor($r('app.color.black_22252a'))
.fontColor($r('app.color.color_white'))
.fontSize(12)
.textAlign(TextAlign.Center)
.borderRadius(19)
}.padding({ left: 16, right: 16 })
.width(CommonConstants.FULL_PERCENT).height(this.displayInfo.getWidth(50))
.alignItems(VerticalAlign.Center)
}
})
}
}.listDirection(Axis.Vertical)
.layoutWeight(1)
.scrollBar(BarState.Off)
.width(CommonConstants.FULL_PERCENT)
}.width(CommonConstants.FULL_PERCENT)
.height(CommonConstants.FULL_PERCENT)
.linearGradient({
angle: 180,
direction: GradientDirection.Bottom, // 渐变方向
repeating: false, // 渐变颜色是否重复
colors: CommonConstants.colors
})
.padding({ top: CommonConstants.DEFAULT_STATUS_HEIGHT })
}
@Builder
homeHead() {
Column() {
RelativeContainer() {
Image($r('app.media.icon_home_make')).size({ width: 48, height: 45 }).id('iv_home_1')
.alignRules({
'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },
'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start }
})
Image($r('app.media.icon_home_vip')).size({ width: 30, height: 30 }).id('iv_home_2')
.alignRules({
'top': { 'anchor': 'iv_home_1', 'align': VerticalAlign.Top },
'end': { 'anchor': '__container__', 'align': HorizontalAlign.End },
'bottom': { 'anchor': 'iv_home_1', 'align': VerticalAlign.Bottom }
})
Row() {
Image($r('app.media.icon_home_create_music')).width('50%')
.onClick(() => {
})
Column() {
Image($r('app.media.icon_import_file')).width(CommonConstants.FULL_PERCENT)
.onClick(() => {
})
Image($r('app.media.icon_home_import_sc')).width(CommonConstants.FULL_PERCENT)
.onClick(() => {
}).margin({ top: 6 })
}.width('50%').margin({ left: 6 })
}
.width(CommonConstants.FULL_PERCENT)
.margin({ top: 24 })
.justifyContent(FlexAlign.SpaceAround)
.alignItems(VerticalAlign.Top)
.alignRules({
'top': { 'anchor': 'iv_home_1', 'align': VerticalAlign.Bottom },
'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start }
})
.id('rw_make')
Row() {
Image($r('app.media.icon_home_recommand')).size({ width: 20, height: 20 })
Text($r('app.string.home_recommand')).margin({ left: 4 }).fontColor($r('app.color.black_00'))
.fontSize(16).fontWeight(FontWeight.Bold)
}.alignRules({
'top': { 'anchor': 'rw_make', 'align': VerticalAlign.Bottom },
'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start }
}).margin({ top: 24 }).alignItems(VerticalAlign.Center).id('rw_recommand')
//查看更多
Row() {
Text($r('app.string.to_see_more')).margin({ left: 4 }).fontColor($r('app.color.gray_63'))
.fontSize(10)
Image($r('app.media.icon_home_more')).size({ width: 12, height: 12 })
}.alignRules({
'top': { 'anchor': 'rw_recommand', 'align': VerticalAlign.Top },
'end': { 'anchor': '__container__', 'align': HorizontalAlign.End },
bottom: { anchor: 'rw_recommand', align: VerticalAlign.Center }
}).alignItems(VerticalAlign.Center)
//横向滚动列表
List({ space: 3 }) {
ForEach(['0', '1', '2', '3'], (item: string, index: number) => {
ListItem() {
Column() {
Stack() {
Image($r('app.media.icon_recommand_bg'))
.size({ width: CommonConstants.FULL_PERCENT, height: CommonConstants.FULL_PERCENT })
RelativeContainer() {
Image($r('app.media.icon_home_test'))
.size({ width: CommonConstants.FULL_PERCENT, height: CommonConstants.FULL_PERCENT })
.id("iv_cover").borderRadius(16)
Text('推荐')
.fontColor($r('app.color.white'))
.fontSize(15.5)
.fontWeight(FontWeight.Medium)
.backgroundColor($r('app.color.red_f37'))
.padding({
top: 6,
bottom: 6,
left: 13,
right: 13
})
.borderRadius({ topLeft: 16, bottomRight: 16 })
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
left: { anchor: '__container__', align: HorizontalAlign.Start }
})
//播放按钮
Image($r('app.media.icon_home_music_pause')).size({ width: 40, height: 40 })
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
}.size({ width: this.displayInfo.getWidth(190), height: this.displayInfo.getWidth(190) })
.backgroundColor($r('app.color.white')).borderRadius(16).padding(2)
}.width(CommonConstants.FULL_PERCENT).height(this.displayInfo.getWidth(218))
Text('1111')
.width(CommonConstants.FULL_PERCENT)
.textAlign(TextAlign.Center)
.fontSize(14)
.fontColor($r('app.color.black_00'))
.fontWeight(FontWeight.Bold)
.margin({ top: 10 })
Text('1111')
.width(CommonConstants.FULL_PERCENT)
.textAlign(TextAlign.Center)
.fontSize(12)
.fontColor($r('app.color.gray_8c'))
.fontWeight(FontWeight.Bold)
.margin({ top: 3 })
}.alignItems(HorizontalAlign.Center).width(this.displayInfo.getWidth(218))
}
})
}
.listDirection(Axis.Horizontal)
.scrollBar(BarState.Off)
.width(CommonConstants.FULL_PERCENT)
.margin({ top: 12 })
.id('list_recommend')
.alignRules({ top: { anchor: 'rw_recommand', align: VerticalAlign.Bottom } })
//独立素材更多
Row() {
Image($r('app.media.icon_home_dlsc')).size({ width: 20, height: 20 })
Text($r('app.string.home_dlsc')).margin({ left: 4 }).fontColor($r('app.color.black_00'))
.fontSize(16).fontWeight(FontWeight.Bold)
}.alignRules({
'top': { 'anchor': 'list_recommend', 'align': VerticalAlign.Bottom },
'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start },
}).margin({ top: 24 }).alignItems(VerticalAlign.Center).id('rw_dlsc')
//查看更多
Row() {
Text($r('app.string.to_see_more')).margin({ left: 4 }).fontColor($r('app.color.gray_63'))
.fontSize(10)
Image($r('app.media.icon_home_more')).size({ width: 12, height: 12 })
}.alignRules({
'top': { 'anchor': 'rw_dlsc', 'align': VerticalAlign.Top },
'end': { 'anchor': '__container__', 'align': HorizontalAlign.End },
bottom: { anchor: 'rw_dlsc', align: VerticalAlign.Center }
}).alignItems(VerticalAlign.Center)
}.width(CommonConstants.FULL_PERCENT)
}.width(CommonConstants.FULL_PERCENT).alignItems(HorizontalAlign.Start).padding({ left: 16, right: 16 })
}
}
找了很久，尝试将头部布局直接移出来也不行，后来细想会不会是RelativeContainer相对布局导致高度问题，于是将RelativeContainer布局给拆分后如下，
@Builder
homeHead() {
Column() {
RelativeContainer() {
Image($r('app.media.icon_home_make')).size({ width: 48, height: 45 }).id('iv_home_1')
.alignRules({
'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },
'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start }
})
Image($r('app.media.icon_home_vip')).size({ width: 30, height: 30 }).id('iv_home_2')
.alignRules({
'top': { 'anchor': 'iv_home_1', 'align': VerticalAlign.Top },
'end': { 'anchor': '__container__', 'align': HorizontalAlign.End },
'bottom': { 'anchor': 'iv_home_1', 'align': VerticalAlign.Bottom }
})
}.width(CommonConstants.FULL_PERCENT).height(48)
Row() {
Image($r('app.media.icon_home_create_music')).width('50%')
.onClick(() => {
})
Column() {
Image($r('app.media.icon_import_file')).width(CommonConstants.FULL_PERCENT)
.onClick(() => {
})
Image($r('app.media.icon_home_import_sc')).width(CommonConstants.FULL_PERCENT)
.onClick(() => {
}).margin({ top: 6 })
}.width('50%').margin({ left: 6 })
}
.width(CommonConstants.FULL_PERCENT)
.margin({ top: 24 })
.justifyContent(FlexAlign.SpaceAround)
.alignItems(VerticalAlign.Top)
RelativeContainer(){
Row() {
Image($r('app.media.icon_home_recommand')).size({ width: 20, height: 20 })
Text($r('app.string.home_recommand')).margin({ left: 4 }).fontColor($r('app.color.black_00'))
.fontSize(16).fontWeight(FontWeight.Bold)
}.alignRules({
'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },
'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start }
}).margin({ top: 24 }).alignItems(VerticalAlign.Center).id('rw_recommand')
//查看更多
Row() {
Text($r('app.string.to_see_more')).margin({ left: 4 }).fontColor($r('app.color.gray_63'))
.fontSize(10)
Image($r('app.media.icon_home_more')).size({ width: 12, height: 12 })
}.alignRules({
'top': { 'anchor': 'rw_recommand', 'align': VerticalAlign.Top },
'end': { 'anchor': '__container__', 'align': HorizontalAlign.End },
bottom: { anchor: 'rw_recommand', align: VerticalAlign.Center }
}).alignItems(VerticalAlign.Center)
}.height(43).width(CommonConstants.FULL_PERCENT)
//横向滚动列表
List({ space: 3 }) {
ForEach(['0', '1', '2', '3'], (item: string, index: number) => {
ListItem() {
Column() {
Stack() {
Image($r('app.media.icon_recommand_bg'))
.size({ width: CommonConstants.FULL_PERCENT, height: CommonConstants.FULL_PERCENT })
RelativeContainer() {
Image($r('app.media.icon_home_test'))
.size({ width: CommonConstants.FULL_PERCENT, height: CommonConstants.FULL_PERCENT })
.id("iv_cover").borderRadius(16)
Text('推荐')
.fontColor($r('app.color.white'))
.fontSize(15.5)
.fontWeight(FontWeight.Medium)
.backgroundColor($r('app.color.red_f37'))
.padding({
top: 6,
bottom: 6,
left: 13,
right: 13
})
.borderRadius({ topLeft: 16, bottomRight: 16 })
.alignRules({
top: { anchor: '__container__', align: VerticalAlign.Top },
left: { anchor: '__container__', align: HorizontalAlign.Start }
})
//播放按钮
Image($r('app.media.icon_home_music_pause')).size({ width: 40, height: 40 })
.alignRules({
center: { anchor: '__container__', align: VerticalAlign.Center },
middle: { anchor: '__container__', align: HorizontalAlign.Center }
})
}.size({ width: this.displayInfo.getWidth(190), height: this.displayInfo.getWidth(190) })
.backgroundColor($r('app.color.white')).borderRadius(16).padding(2)
}.width(CommonConstants.FULL_PERCENT).height(this.displayInfo.getWidth(218))
Text('1111')
.width(CommonConstants.FULL_PERCENT)
.textAlign(TextAlign.Center)
.fontSize(14)
.fontColor($r('app.color.black_00'))
.fontWeight(FontWeight.Bold)
.margin({ top: 10 })
Text('1111')
.width(CommonConstants.FULL_PERCENT)
.textAlign(TextAlign.Center)
.fontSize(12)
.fontColor($r('app.color.gray_8c'))
.fontWeight(FontWeight.Bold)
.margin({ top: 3 })
}.alignItems(HorizontalAlign.Center).width(this.displayInfo.getWidth(218))
}
})
}
.listDirection(Axis.Horizontal)
.scrollBar(BarState.Off)
.width(CommonConstants.FULL_PERCENT)
.margin({ top: 12 })
RelativeContainer(){
//独立素材更多
Row() {
Image($r('app.media.icon_home_dlsc')).size({ width: 20, height: 20 })
Text($r('app.string.home_dlsc')).margin({ left: 4 }).fontColor($r('app.color.black_00'))
.fontSize(16).fontWeight(FontWeight.Bold)
}.alignRules({
'top': { 'anchor': '__container__', 'align': VerticalAlign.Top },
'left': { 'anchor': '__container__', 'align': HorizontalAlign.Start },
}).alignItems(VerticalAlign.Center).id('rw_dlsc')
//查看更多
Row() {
Text($r('app.string.to_see_more')).margin({ left: 4 }).fontColor($r('app.color.gray_63'))
.fontSize(10)
Image($r('app.media.icon_home_more')).size({ width: 12, height: 12 })
}.alignRules({
'top': { 'anchor': 'rw_dlsc', 'align': VerticalAlign.Top },
'end': { 'anchor': '__container__', 'align': HorizontalAlign.End },
bottom: { anchor: 'rw_dlsc', align: VerticalAlign.Center }
}).alignItems(VerticalAlign.Center).margin({ top: 24 })
}.height(43).width(CommonConstants.FULL_PERCENT)
}.width(CommonConstants.FULL_PERCENT).padding({ left: 16, right: 16 })
}有相对布局的地方，给固定高度，然后问题得到解决。
