HarmonyOS 鸿蒙Next Scroll内部嵌套纵向的Grid如何把内容全部展开

发布于 1周前 作者 zlyuanteng 最后一次编辑是 5天前 来自 鸿蒙OS

UI设计需要整体页面滑动，而且页面里有纵向的表格列表，需要表格列表整体全都展开的。

Scroll() {
  Text("常用功能")
  ...
  Grid() {
    ForEach(this.commonFuctionList, (text: string) => {
      GridItem() {
        Column() {
          Image($r("app.media.app_icon"))
            .width(60)
            .height(60)
            .margin({top : 10})
          Text(text)
            .fontColor(Color.Black)
            .fontSize(12)
            .margin({top:5,bottom:10})
            .height(20)
        }
      }.width("25%")
      .aspectRatio(0.8)
    })
  }
  .width("100%")
  .layoutDirection(GridDirection.Column)
  .columnsTemplate("1fr 1fr 1fr 1fr")
  .margin({ left: 14, right: 14 })
}

通过什么方法可以获取GridItem() {}的实际高度和GridItem() 之间的间隔 方便计算Gird实际所需要的高度可以让Gird在Scroll内全部展开？ UI页面需要实现多层纵向列表的嵌套，子控件列表需要在父布局全部展开。


更多关于HarmonyOS 鸿蒙Next Scroll内部嵌套纵向的Grid如何把内容全部展开的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
4 回复

获取组件尺寸参考链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-component-area-change-event-V5#onareachange

// xxx.ets

@Entry
@Component
struct Page {
  @State numbers1: String[] = ['0', '1', '2', '3', '4','0', '1', '2', '3', '4']

  build() {
      Scroll() {
        Column() {
          Text("常用功能")
          Grid() {
            ForEach(this.numbers1, (text: string) => {
              GridItem() {
                Column() {
                  Image($r("app.media.app_icon"))
                    .width(60)
                    .height(60)
                    .margin({top : 10})
                  Text(text)
                    .fontColor(Color.Black)
                    .fontSize(12)
                    .margin({top:5,bottom:10})
                    .height(20)
                }
              }.width("25%")
              .aspectRatio(0.8)
              .onAreaChange((oldValue: Area, newValue: Area) => {
                console.info(`Ace: on area change, oldValue is ${JSON.stringify(oldValue)}`)
                //获取组件的尺寸
                console.info(`Ace: newValue is ${JSON.stringify(newValue)} `)
              })
            })
          }
          // 设置列与列的间距。
          .columnsGap(1)
          //设置行与行的间距。
          .rowsGap(1)
          .width("100%")
          .layoutDirection(GridDirection.Column)
          .columnsTemplate("1fr 1fr 1fr 1fr")
          .margin({ left: 14, right: 14 })
        }.width('100%').margin({ top: 5 })
      }
    }
}

更多关于HarmonyOS 鸿蒙Next Scroll内部嵌套纵向的Grid如何把内容全部展开的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


这样写grid就是全部展开，但是性能差到爆

在HarmonyOS鸿蒙系统中，若要在Next Scroll内部嵌套一个纵向的Grid，并希望将内容全部展开，可以通过设置Grid和Scroll组件的相关属性来实现。

  1. 确保Grid的列数：首先，需要设置Grid的列数，使其适应内容的展示需求。如果内容主要是纵向排列，可以设置列数为1，这样Grid就会呈现为纵向列表。

  2. 设置Scroll的高度：对于Scroll组件，需要确保其高度足够容纳内部所有内容。如果Scroll的高度被限制，那么即使Grid的内容再多，也只能显示Scroll可视区域的内容。

  3. 禁用Grid的滚动：由于Grid已经嵌套在Scroll内部，为了避免滚动冲突，应该禁用Grid的滚动功能。这可以通过设置Grid的滚动属性为false来实现。

  4. 内容自适应：确保Grid内部的内容（如子项）能够自适应Grid的大小，避免内容溢出或显示不全。

  5. 布局约束：使用布局约束（如Match_Parent、Wrap_Content等）来确保Grid和Scroll组件能够正确地根据内容调整大小。

通过上述步骤，通常可以实现Next Scroll内部嵌套纵向Grid并全部展开内容的效果。如果问题依旧没法解决请联系官网客服，官网地址是：https://www.itying.com/category-93-b0.html。

@Entry
@ComponentV2
struct ScrollHasGrid {
  @Local commonFuctionList: string[] = []

  aboutToAppear(): void {
    for (let i = 0; i < 100; i++) {
      this.commonFuctionList.push(i.toString())
    }
  }

  build() {
    Scroll() {
      Column() {


        Text("常用功能")

        Grid() {
          ForEach(this.commonFuctionList, (text: string) => {
            GridItem() {
              Column() {
                Image($r("app.media.app_icon"))
                  .width(60)
                  .height(60)
                  .margin({ top: 10 })
                Text(text)
                  .fontColor(Color.Black)
                  .fontSize(12)
                  .margin({ top: 5, bottom: 10 })
                  .height(20)
              }
            }.width("25%")
            .aspectRatio(0.8)
          })
        }
        .width("100%")
        .layoutDirection(GridDirection.Column)
        .columnsTemplate("1fr 1fr 1fr 1fr")
        .margin({ left: 14, right: 14 })
      }
    }
  }
}
回到顶部