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

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内全部展开?这些问题都没有查到Next版本的实现方法。

HarmonyOS
2024-09-02 12:33:58
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

获取组件尺寸参考链接:

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 }) 
      } 
    } 
}
分享
微博
QQ
微信
回复
2024-09-02 17:12:54
相关问题
HarmonyOS Tabs嵌套Grid问题
83浏览 • 1回复 待解决
HarmonyOS Scroll嵌套RelativeContainer 问题
351浏览 • 1回复 待解决
scroll和list嵌套滑动
1546浏览 • 1回复 待解决
HarmonyOS Scroll 嵌套 RelativeContainer 问题
516浏览 • 1回复 待解决
HarmonyOS Scroll嵌套web手势冲突
9浏览 • 1回复 待解决
Scroll与WaterFlow滑动嵌套
1084浏览 • 1回复 待解决
HarmonyOS Scroll+web+list嵌套滑行
32浏览 • 1回复 待解决
如何实现纵向且逆向滑动Slider?
452浏览 • 1回复 待解决
HarmonyOS scroll嵌套List不能整体滑动
516浏览 • 1回复 待解决