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

**原因**

当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) _// Adaptive occupancy of remaining space_
      .listDirection(Axis.Vertical) _// Arrangement direction_
      .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) _// The boundary line between each row_
      .edgeEffect(EdgeEffect.Spring) _// Sliding to the edge has no effect_
      .scrollBar(BarState.Off) _// Set scrollbar_
      .margin({ top: 20 })
      .width('90%')
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
  }
}

效果如图所示：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/72/v3/A-WPN8saQ9iObQb1wfvUvQ/zh-cn_image_0000002624635816.png?HW-CC-KV=V1&HW-CC-Date=20260709T133841Z&HW-CC-Expire=86400&HW-CC-Sign=4E4F82241FF0E5F1660DA8AF1844F6FA4B9D8C71A84D45DC043BD1C63182F412 "点击放大")