問(wèn)題及場(chǎng)景

ListView 是 Flutter 開(kāi)發(fā)者第一個(gè)學(xué)習(xí)到的 Widget，因?yàn)樗梢曰瑒?dòng)。一切都會(huì)運(yùn)行得很好，直到 ListView 中的 Item 本身也是一個(gè) ListView。你可能會(huì)看到 Flutter 建議你將內(nèi)部的 ListView 的ShrinkWrap 屬性設(shè)置為 True。雖然錯(cuò)誤消除了，但是威脅還在。因?yàn)?ShrinkWrap 屬性會(huì)將 ListView 一次性全部填充，算出所有高度，如果內(nèi)部 ListView 的數(shù)據(jù)量比較大，那將產(chǎn)生性能問(wèn)題，會(huì)有很大的風(fēng)險(xiǎn)掉幀、jank 和 stutters。

假設(shè)你遇到下面這樣的場(chǎng)景

final outerListChildren = <ListView>[ListView(children: <Wdiget>[...]),...
];return ListView.Builder(itemCount: outerListChildren.length,itemBuilder: (context, index) {return outerListChildren[index]}
)

然后我們按照 Flutter 的提示，將內(nèi)部的 ListView 加上 shrinkWrap 和 physics 屬性如下

final outerListChildren = <ListView>[ListView(shrinkWrap: true,physics: const NeverScrollableScrollPhysics(),children: <Wdiget>[...]),...
];return ListView.Builder(itemCount: outerListChildren.length,itemBuilder: (context, index) {return outerListChildren[index]}
)

解決方法：

1、首先，將最外層的 ListView 改為 CustomScrollView

return CustomScrollView(children: outerListChildren}
)

2、然后我們將外部的 ListView 列表改為 SliverList 列表

final outerListChildren = <SliverList>[];
return CustomScrollView(children: outerListChildren}
)

3、所有 SliverList 添加 delegate，并使用 SliverChildBuilderDelegate 作為 value，_myWidgets 是之前的 inner ListView 需要顯示的內(nèi)容

final outerListChildren = <SliverList>[SliverList(delegate: SliverChildBuilderDelegate(childCount: _myWidgets.length,(context, index) => _myWidgets[index]))
];
return CustomScrollView(children: outerListChildren}
)

至此，大功告成