HarmonyOS 高度自适应的问题

Swiper() { ForEach(CustomViewUtil.getMenuByPage(this.homeRspModel.data.diamonds, 10), (firstPageItem: FirstPageItem[]) => {  
        Grid() {  
          ForEach(firstPageItem, (item: FirstPageItem) => {  
            GridItem() {  
              Column() {  
                Image(item.imageUrl)  
                  .width(35)  
                  .height(35)  
                  .objectFit(ImageFit.Fill)  
                  .onClick(()=>{                   
                  })  
                Text(item.title)  
                  .fontSize(11)  
                  .fontColor($r('app.color._333333'))  
                  .maxLines(1)  
                  .textOverflow({ overflow: TextOverflow.Ellipsis })  
                  .margin({ top: $r('app.float.vp_3') })  
              }.justifyContent(FlexAlign.Center)  
            }  
          }, (item: FirstPageItem) => JSON.stringify(item))  
        }  
        .edgeEffect(EdgeEffect.None)  
        .columnsTemplate('1fr 1fr 1fr 1fr 1fr')  
        .rowsTemplate('1fr 1fr')  
        .columnsGap(0)//列与列的间距  
        .rowsGap(0)//行与行的间距  
        .width('100%')  
        .backgroundColor(Color.White)  
        .borderRadius($r('app.float.vp_8'))  
      })  
    }  
    .itemSpace(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_SM ? 0 : StyleConstants.ITEM_SPACE)  
    .width(StyleConstants.FULL_WIDTH)  
    .indicator(  
      this.homeRspModel.data.diamonds.length > 10 ?  
        // 设置圆点导航点样式  
      new DotIndicator()  
        .bottom(0)  
        .itemWidth(5)  
        .itemHeight(5)  
        .selectedItemWidth(5)  
        .selectedItemHeight(5)  
        .color(Color.Gray)  
        .selectedColor(Color.Red) : false,  
    )  
    .curve(Curve.Linear)  
    .loop(false)  
    .displayCount(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? StyleConstants.DISPLAY_THREE :  
      (this.currentBreakpoint === BreakpointConstants.BREAKPOINT_MD ? StyleConstants.DISPLAY_TWO :  
      StyleConstants.DISPLAY_ONE))  
    .padding({  
      left: 12,  
      right: 12,  
    })

如上代码:因为不确定Swiper() 的具体高度,无法设置.height(160),就会出现全屏的情况,自适应高度,这里image是根据屏幕的宽度自适应的大小,而且 .indicator()圆点不是必存在,故无法设置一个具体的高度。这种情况应该怎么处理?让image和 text填充满控件并无多余的留白。

HarmonyOS
2024-10-16 11:26:18
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zxjiu

rowsTemplate、columnsTemplate都不设置时layoutDirection、maxcount、minCount、cellLength才生效,maxCount内的值为多少,对应方向上最大显示行数就是多少,可以理解为maxCount有一个高度控制开关,只要设置了maxCount之后,Grid就能实现自适应高度效果,具体使用方式请参考文档, 文档链接:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-grid-V5#flingspeedlimit11

分享
微博
QQ
微信
回复
2024-10-16 18:30:56
相关问题
HarmonyOS Web高度自适应问题
676浏览 • 1回复 待解决
HarmonyOS GridItem自适应高度问题
371浏览 • 1回复 待解决
HarmonyOS Grid自适应高度和拖拽问题
433浏览 • 1回复 待解决
HarmonyOS web组件自适应高度问题
974浏览 • 1回复 待解决
HarmonyOS 自适应父组件高度问题
996浏览 • 1回复 待解决
HarmonyOS 高度自适应
212浏览 • 1回复 待解决
HarmonyOS RelativeContainer无法自适应高度
306浏览 • 1回复 待解决
HarmonyOS RelativeContainer宽高自适应问题
571浏览 • 1回复 待解决
Web组件如何实现高度自适应
1028浏览 • 1回复 待解决
Grid组件如何实现高度自适应
3189浏览 • 1回复 待解决