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

Question

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

Answer 1

可能原因

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

解决措施

给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) 
  } 
}

效果如图所示：