HarmonyOS scroll如何限制最大高度？

Question

在一个布局中间需要展示一段文本，给这个文本（Text组件）套了个scroll，这个文本上下都有其它ui需要展示；当文本较短比如只有一行可以正常展示，但如果这个文本超长一个屏幕都展示不了，那么文本下面的ui会被挤出屏幕，如何在文本超长的情况下控制这个Text组件或scroll组件的高度以防止其它ui被挤出屏幕。

Answer 1

参考demo:

@Entry
@Component
struct NestedScroll {
  @State listPosition: number = 0; // 0代表滚动到List顶部，1代表中间值，2代表滚动到List底部。
  private arr: number[] = [1]
  private scrollerForList: Scroller = new Scroller()

  build() {
    Flex() {
      Column() {
        Text("头部")
          .width("100%")
          .height("20%")
          .backgroundColor(0X330000FF)
          .fontSize(16)
          .textAlign(TextAlign.Center)

        List({ space: 20, scroller: this.scrollerForList }) {
          ForEach(this.arr, (item: number) => {
            ListItem() {
              Text("这是一段超长文字这是一段超长文字这是一段超" +
                "长文字这是一段超长文字这是一段超长文字这是一段超长文" +
                "字这是一段超长文字这是一段超长文字这是一段超长文字这是一" +
                "段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超" +
                "长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段" +
                "超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长" +
                "文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这" +
                "是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长" +
                "文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是" +
                "一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超" +
                "长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一" +
                "段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超" +
                "长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这" +
                "是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文" +
                "字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字这是一段超长文字")
                .borderRadius(15)
                .fontSize(16)
                .backgroundColor(Color.White)
            }.width("100%")
          }, (item: string) => item)


        }
        .borderColor(Color.Green)
        .borderWidth(2)
        .width("100%")
        .edgeEffect(EdgeEffect.None)
        .friction(0.6)
        .onReachStart(() => {
          this.listPosition = 0
        })
        .onReachEnd(() => {
          this.listPosition = 2
        })
        .onScrollFrameBegin((offset: number) => {
          if ((this.listPosition == 0 && offset <= 0) || (this.listPosition == 2 && offset >= 0)) {
            return { offsetRemain: 0 }
          }
          this.listPosition = 1
          return { offsetRemain: offset };
        })
        .constraintSize({ maxHeight: 400 })

        Text("尾部")
          .width("100%")
          .height("20%")
          .backgroundColor(0X330000FF)
          .fontSize(16)
          .textAlign(TextAlign.Center)
      }
    }.width('100%').height('100%').backgroundColor(0xDCDCDC)
  }
}