HarmonyOS grid怎么自适应高度,并且不让其滑动

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
aquaa

需要用getGridHeight方法先自行计算出Grid组件的高度,先根据窗口宽度和网格列数,计算出单张图片宽度;再根据图片宽度和宽高比计算出图片高度,并与标题和内容栏高度相加;最后乘网格行数得到Grid组件的总高度。参考demo:

// features/home/src/main/ets/view/RecommendedVideo.ets
build() {
  Column() {
    // 推荐视频区域
    Grid() {
      ForEach(this.videoImgList, (item: VideoImage, index: number) => {
        GridItem() {
          Column() {
            Stack({ alignContent: Alignment.Bottom}) {
              ...
            }
            .width(CommonConstants.FULL_PERCENT)
            // 宽高按照预设的比例,随容器组件发生变化且宽高比不变
            .aspectRatio(HomeConstants.VIDEO_DIALOG_ASPECT_RATIO)
            ...
            VideoTitle({ currentTopIndex: this.currentTopIndex, title: item.getTitle() })
            VideoContent({ currentTopIndex: this.currentTopIndex, content: item.getContent() })
          }
          .alignItems(HorizontalAlign.Start)
        }
      }, (item: VideoImage, index: number) => index + JSON.stringify(item))
    }
    // 设置网格布局列数,均分宽度
    .columnsTemplate(this.videoGridColumn)
    .rowsTemplate(CommonConstants.VIDEO_GRID_COLUMNS[0])
    .columnsGap($r('app.float.video_grid_gap'))
    // 根据不同断点下列数动态计算总高度,保持图片宽高比不变
    .height(this.getGridHeight(this.videoGridColumn, this.currentBreakpoint, this.windowWidth))
    ...
  }
}

// 计算网格布局总高度
getGridHeight(videoGridColumn: string, currentBreakpoint: string, windowWidth: number): string {
  // 获取窗口宽度,减掉两侧空白部分
  let result: number = px2vp(windowWidth) - new BreakpointType(HomeConstants.VIDEO_GRID_MARGIN[0],
    HomeConstants.VIDEO_GRID_MARGIN[1], HomeConstants.VIDEO_GRID_MARGIN[2]).getValue(this.currentBreakpoint);
  if (currentBreakpoint === BreakpointConstants.BREAKPOINT_LG) {
    result = result - HomeConstants.LG_SIDEBAR_WIDTH;
  } else {
    Logger.info(`No need to subtract sidebar width`);
  }
  // 根据网格列数计算单张图片宽度
  if (videoGridColumn === CommonConstants.VIDEO_GRID_COLUMNS[0]) {
    result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * 1) / HomeConstants.TWO;
  } else if (videoGridColumn === CommonConstants.VIDEO_GRID_COLUMNS[1]) {
    result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * 2) / CommonConstants.THREE;
  } else if (videoGridColumn === CommonConstants.VIDEO_GRID_COLUMNS[2]) {
    result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * 3) / CommonConstants.FOUR;
  } else {
    result = (result - HomeConstants.VIDEO_GRID_ITEM_SPACE * 4) / HomeConstants.FIVE;
  }
  // 计算单张图片高度及标题、内容高度,相加计算网格布局总高度
  return result / HomeConstants.VIDEO_DIALOG_ASPECT_RATIO * HomeConstants.TWO +
  HomeConstants.VIDEO_GRID_DESCRIPTION_HEIGHT + HomeConstants.HEIGHT_UNIT;
}

list组件中有子组件ListItemGroup,可以实现粘性固定,可参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-listitemgroup-V5

分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS Grid高度根据内容自适应
93浏览 • 1回复 待解决
HarmonyOS Grid组件能否高度自适应
51浏览 • 1回复 待解决
HarmonyOS Grid自适应高度和拖拽问题
563浏览 • 1回复 待解决
Grid组件如何实现高度自适应
3291浏览 • 1回复 待解决
HarmonyOS web组件怎么自适应高度
39浏览 • 1回复 待解决
HarmonyOS 高度自适应
280浏览 • 1回复 待解决
HarmonyOS RichText自适应高度
19浏览 • 1回复 待解决
HarmonyOS grid如何自适应宽度
18浏览 • 1回复 待解决
HarmonyOS RichText能否自适应高度
29浏览 • 1回复 待解决
HarmonyOS RelativeContainer无法自适应高度
412浏览 • 1回复 待解决
HarmonyOS Web高度自适应问题
798浏览 • 1回复 待解决
HarmonyOS 高度自适应的问题
362浏览 • 1回复 待解决
HarmonyOS GridItem自适应高度问题
425浏览 • 1回复 待解决
HarmonyOS web的高度自适应内容的高度
98浏览 • 1回复 待解决
HarmonyOS List高度根据内容自适应
35浏览 • 1回复 待解决