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

Question

如题：HarmonyOS grid怎么自适应高度，并且不让其滑动？

Answer 1

需要用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