HarmonyOS 鸿蒙Next Scroll组件设置最大高度 未超过最大高度即为内容高度

发布于 1周前 作者 itying888 来自 鸿蒙OS

HarmonyOS 鸿蒙Next Scroll组件设置最大高度 未超过最大高度即为内容高度

Scroll组件设置最大高度,未超过最大高度就是内容高度

2 回复

用这个可以设置最大高度,示例代码如下:

[@Entry](/user/Entry)
[@Component](/user/Component)
struct NestedScroll {
 [@State](/user/State) listPosition: number = 0; // 0代表滚动到List顶部,1代表中间值,2代表滚动到List底部。
 private arr: number[] = [1, 2, 3, 4, 5, 6, 7]
 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("ListItem" + item)
               .width("100%")
               .height("100%")
               .borderRadius(15)
               .fontSize(16)
               .textAlign(TextAlign.Center)
               .backgroundColor(Color.White)
           }.width("100%").height(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)
 }
}

更多关于HarmonyOS 鸿蒙Next Scroll组件设置最大高度 未超过最大高度即为内容高度的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中,针对Next Scroll组件设置最大高度的问题,你可以通过以下方式来实现:

Next Scroll组件的高度通常由其内容决定,即内容有多高,滚动区域就有多高。但如果你想限制这个高度,使其不超过某个最大值,可以通过设置组件的样式或属性来实现。

具体步骤如下:

  1. 找到Next Scroll组件的样式定义:在XML布局文件中,找到对应的Next Scroll组件,并检查其样式定义。

  2. 添加或修改高度属性:在样式定义中,添加或修改height属性,设置一个具体的值作为最大高度。这个值应该是一个具体的像素值或者是一个百分比值(相对于父容器)。

  3. 使用布局约束:如果使用的是ConstraintLayout等布局,还可以通过添加布局约束来限制Next Scroll组件的高度。

  4. 动态设置高度:在代码中,可以通过设置组件的LayoutParams来动态调整Next Scroll组件的高度。

请注意,设置最大高度后,如果内容高度未超过这个最大值,Next Scroll组件的高度将等于内容高度;如果内容高度超过这个最大值,组件高度将被限制在最大值内,并允许滚动查看全部内容。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部