今天在做Harmony开发的时候遇到一个问题,List组件的最后一个item显示不全，如下图，item-9显示不出来，显示了一部分
这个页面的代码结构如下：
Column() {
Row() {
Text('文本1').fontSize(15).fontColor(Color.Black)
Text('文本2').fontSize(15).fontColor(Color.Black)
}.height(150).width('100%').backgroundColor(Color.Green)
List({ space: 10 }) {
ForEach(this.areaSelectList, (str: string, i: number) => {
ListItem() {
Stack() {
Text('' + str)
.height(150)
.fontSize(18)
.fontColor(Color.White)
}
.width('100%')
.borderRadius(5)
.backgroundColor(Color.Blue)
}
})
}
.height('100%')
.padding({ left: 15, right: 15, top: 15 })
}
.backgroundColor(Color.White)
.height('100%')
.width('100%')
在一个Column组件中有一个Row组件和一个List组件，Row组件高度是150宽度是100%，List组件我想要高度填满剩余的空间所以高度是100%，里边有10个item。
看起来很正常但是实际效果和预想不一样，滑动到最后一个item时发现无法滑动了，已经到底部了，但是最后一个item还没有显示全。
原因：
问题出在了高度的 100% ，这个地方是个坑，在我们预想中，高度100%应该会填满父组件剩余的空间，实际也是这样的，不过这个100%的高度填满，是按照父组件的高度填满，并不是按照父组件的剩余空间填满，也就是说，List组件的高度是是整个父组件的高度，并不是 父组件的高度减去Row组件高度所得的剩余高度，父布局又是一个线性布局，所以List组件的高度就会超出屏幕范围，导致最后一条item显示不全。
对策：
给List组件加上layoutWeight(1)，使它填满父控件剩余空间，这个问题就可以解决。
但是还有一种情况，就是List组件的外层又加了一个线性组件，这个时候List又会显示不全，原因其实和上边一样，新加的线性组件的高度也超出了屏幕。方案就是，给新加的线性组件也要加上layoutWeight(1)，就可以显示正常。
