HarmonyNext使用ListItemGroup添加头部布局，头部布局底部留很大空白

最新推荐文章于 2025-12-17 21:43:36 发布

原创

最新推荐文章于 2025-12-17 21:43:36 发布 · 442 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos

今天使用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.med