今天在做Harmony開發(fā)的時候遇到一個問題,List組件的最后一個item顯示不全，如下圖，item-9顯示不出來，顯示了一部分

顯示不全

這個頁面的代碼結(jié)構(gòu)如下：

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。

看起來很正常但是實際效果和預(yù)想不一樣，滑動到最后一個item時發(fā)現(xiàn)無法滑動了，已經(jīng)到底部了，但是最后一個item還沒有顯示全。

原因：

問題出在了高度的?100% ，這個地方是個坑，在我們預(yù)想中，高度100%應(yīng)該會填滿父組件剩余的空間，實際也是這樣的，不過這個100%的高度填滿，是按照父組件的高度填滿，并不是按照父組件的剩余空間填滿，也就是說，List組件的高度是是整個父組件的高度，并不是? 父組件的高度減去Row組件高度所得的剩余高度，父布局又是一個線性布局，所以List組件的高度就會超出屏幕范圍，導(dǎo)致最后一條item顯示不全。

對策：

給List組件加上layoutWeight(1)，使它填滿父控件剩余空間，這個問題就可以解決。

但是還有一種情況，就是List組件的外層又加了一個線性組件，這個時候List又會顯示不全，原因其實和上邊一樣，新加的線性組件的高度也超出了屏幕。方案就是，給新加的線性組件也要加上layoutWeight(1)，就可以顯示正常。