如何设置半模态窗口高度自适应，同时自定义最高高度
========================

#### 问题现象

bindSheet设置高度为SheetSize.FIT\_CONTENT自适应内容高度时，半模态页面限高只能为系统设定的值，无法自定义。如何根据半模态页面内容去设置高度，同时要求最大高度设置为百分比，例如希望设置为80%？

问题代码：

@Entry
@Component
struct SheetDemo {
  @State isShowSheet: boolean \= false
  private items: number\[\] \= \[0, 1, 2, 3, 4, 5, 6, 7, 8, 9\]

  @Builder
  SheetBuilder() {
    Column() {
      List({ space: '10vp' }) {
        ForEach(this.items, (item: number) \=\> {
          ListItem() {
            Text(String(item)).fontSize(16).fontWeight(FontWeight.Bold)
          }.width('90%').height('80vp').backgroundColor('#ff53ecd9').borderRadius(10)
        })
      }.alignListItem(ListItemAlign.Center).margin({ top: '10vp' }).width('100%')
    }
    .width('90%')
    .height('100%')
  }

  build() {
    Column() {
      Button('Open Sheet').width('90%').height('80vp')
        .onClick(() \=\> {
          this.isShowSheet \= !this.isShowSheet
        })
        .bindSheet($$this.isShowSheet, this.SheetBuilder(), {
          height: SheetSize.FIT\_CONTENT,
          showClose: false,
          preferType: SheetType.BOTTOM,
        })
    }.width('100%').height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

#### 背景知识

[半模态转场](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-universal-attributes-sheet-transition#bindsheet)：通过bindSheet属性为组件绑定半模态页面，在组件插入时可通过设置自定义或默认的内置高度确定半模态大小。

#### 解决方案

根据半模态页面内容的高度计算在窗口高度中的占比，高度大于最大高度，则显示最大高度，将高度配置到SheetOptions中：

import { window } from '@kit.ArkUI';

@Entry
@Component
struct SheetDemo {
  @State sheetHeight: string \= '80%';
  @State windowHeight: number \= 0;
  @State isShowSheet: boolean \= false;
  private items: number\[\] \= \[0, 1, 2, 3, 4, 5, 6, 7, 8, 9\];
  private itemHeight: number \= 80;
  private spaceHeight: number \= 10;
  private maxHeightPercent: number \= 80;

  @Builder
  SheetBuilder() {
    Column() {
      List({ space: this.spaceHeight }) {
        ForEach(this.items, (item: number) \=\> {
          ListItem() {
            Text(String(item)).fontSize(16).fontWeight(FontWeight.Bold);
          }.width('90%').height(this.itemHeight).backgroundColor('#5291FF').borderRadius(10);
        });
      }.alignListItem(ListItemAlign.Center).margin({ top: '10vp' }).width('100%');
    }
    .width('90%')
    .height('100%');
  }

 _ // 根据List内容去设置高度，同时要求最大高度小于80%_
  build() {
    Column() {
      Button('Open Sheet').width('90%').height('80vp')
        .onClick(() \=\> {
          this.isShowSheet \= !this.isShowSheet;
          _//_ _计算List组件内元素在窗口中的高度占比_
          let height: number \=
            ((this.itemHeight \+ this.spaceHeight) \* this.items.length \+ this.spaceHeight) / this.windowHeight \* 100;
          this.sheetHeight \= \`${Math.min(this.maxHeightPercent, height)}%\`;
        })
        .bindSheet($$this.isShowSheet, this.SheetBuilder(), {
          height: this.sheetHeight, _// this.sheetHeight__为string类型的百分比_
          showClose: false,
          preferType: SheetType.BOTTOM,
        });
    }.width('100%').height('100%')
    .justifyContent(FlexAlign.Center);
  }

  onPageShow(): void {
    let windowClass: window.Window | undefined \= undefined;
    window.getLastWindow(this.getUIContext().getHostContext()).then((data) \=\> {
      windowClass \= data;
      try {
        let properties \= windowClass.getWindowProperties();
        let rect \= properties.windowRect;
        _// rect.width:窗口宽度；rect.height:窗口高度。单位px。_
        this.windowHeight \= this.getUIContext().px2vp(rect.height);
      } catch (exception) {
        console.error(\`Failed to obtain the window properties. Cause code: ${exception.code}, message: ${exception.message}\`);
      }
    });
  }
}

列表高度超过最大高度时，效果如图：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2b/v3/yvJttPUhQAODsRpI4qe23A/zh-cn_image_0000002658795073.png?HW-CC-KV=V1&HW-CC-Date=20260709T133917Z&HW-CC-Expire=86400&HW-CC-Sign=720F6E6157A6F428E40283C9BC05C7697CA02D4307C41FBC494385C598EBFEAD "点击放大")

列表高度小于最大高度时，效果如图：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/70/v3/NccUwnVOR3GLEkznfmcf2A/zh-cn_image_0000002628555704.png?HW-CC-KV=V1&HW-CC-Date=20260709T133917Z&HW-CC-Expire=86400&HW-CC-Sign=B4BBB4E68E646E330C7A03A56FEFF4611E63DC4E3FA14598B4C10C45FB1C1595 "点击放大")