HarmonyOS scroll如何限制最大高度

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

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

参考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)
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS scroll高度设置问题
974浏览 • 1回复 待解决
组件最大和最小宽度和高度如何设置
2528浏览 • 1回复 待解决
如何设置组件的最大最小宽度高度
3259浏览 • 1回复 待解决
路由页面栈可以跳过最大限制32吗
755浏览 • 1回复 待解决
HarmonyOS Text如何设置最大宽度maxWidth
72浏览 • 1回复 待解决
HarmonyOS 如何限制TextInput的规则?
414浏览 • 1回复 待解决
HarmonyOS CustomDialogController套用Scroll
232浏览 • 1回复 待解决
HarmonyOS scroll组件问题
39浏览 • 1回复 待解决
如何去掉Scroll回弹效果
764浏览 • 1回复 待解决