如何解决列表组件List在不设置高度的情况下滑动不到底的问题

​当List组件中的子项比较多的时,同级有其它组件,会下压List,导致显示异常。

HarmonyOS
2024-03-17 14:43:10
浏览
已于2024-3-17 14:43:47修改
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
yu_qingbo

给List组件设置layoutWeight()属性。layoutWeight()可以自适应占满剩余空间父容器尺寸。父容器确定时,设置了layoutWeight的子元素在主轴布局尺寸按照权重进行分配,忽略本身尺寸设置。可参考如下代码:

// xxx.ets 
@Entry 
@Component 
struct ListExample { 
  @State arr: string[] = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15']; 
  scroller: Scroller = new Scroller(); 
 
  build() { 
    Column() { 
      RichText('') 
        .width('90%') 
        .height(300) 
        .backgroundColor(0XBDDB69) 
      List({ space: 22, initialIndex: 0, scroller: this.scroller }) { 
        ForEach(this.arr, (item: string) => { 
          ListItem() { 
            Text(item) 
              .width('100%') 
              .height(100) 
              .fontSize(16) 
              .textAlign(TextAlign.Center) 
              .borderRadius(10) 
              .backgroundColor(0xFFFFFF) 
          } 
        }, (item: string) => item) 
      } 
      .layoutWeight(1) // 自适应占满剩余空间 
      .listDirection(Axis.Vertical) // 排列方向 
      .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线 
      .edgeEffect(EdgeEffect.Spring) // 滑动到边缘无效果 
      .scrollBar(BarState.Off) // 设置滚动条 
      .edgeEffect(EdgeEffect.Spring) 
      .margin({ top: 20 }) 
      .width('90%') 
    } 
    .width('100%') 
    .height('100%') 
    .backgroundColor(0xDCDCDC) 
  } 
}

效果如图所示:

分享
微博
QQ
微信
回复
2024-03-18 20:26:35
相关问题
键盘拉起时列表无法上下滑动
2066浏览 • 1回复 待解决
List组件initialIndex属性设置生效
2130浏览 • 1回复 待解决
Gauge组件问题,该如何解决
186浏览 • 1回复 待解决
HarmonyOS如何去掉List组件滑动线
655浏览 • 1回复 待解决
List列表组件如何改为横向显示
661浏览 • 1回复 待解决
如何解决预览流黑屏问题
1021浏览 • 1回复 待解决