🤖

ListView と SingleChildScrollView + Column の違い

2023/03/21に公開

ちょっと気になったので、
ListView と SingleChildScrollView + Column の違いを調べてみました。

参考
https://stackoverflow.com/questions/62146197/what-is-the-difference-between-listview-and-singlechildscrollview-in-flutter

↑回答者がレミさんということもあり、なかなか信用できるかなと思ってますmm

ざっくりとした違い

○ ListView
画面上に描画する分だけをレンダリングする

○ SingleChildScrollView + Column
画面上以外のWidget全てをレンダリングする

まぁ、文面だけだと良くわからないと思うので
実際にテストしてみた結果を見てほしい。

それぞれ Text Widget を1000個ほど描画しろ〜
って処理を施しています。

○ ListView

○ SingleChildScrollView + Column

ちょっと分かりづらいと思いますが、下記の結果が得られました。

○ ListView・レンダリング数:63回
○ SingleChildScrollView + Column・レンダリング数:1000回

上記の結果から、

○ ListView:その都度レンダリング
○ SingleChildScrollView + Column:一気にレンダリング

みたいなイメージで多分大丈夫だと思います。

使い分けに関して

結果だけを見ると、ListViewの方が負担少ないしこっちでええやんとなると思います。

ただ、必ずしもそういう場合のみではありません。

僕が直近でぶち当たった壁をご紹介すると、
Widget位置を知りたい場合とかですね。

例えば、

下の方にあるこの Widget の位置までスクロールしたい

みたいな事ありませんか?

この場合は、Widgetの位置を把握する必要があるので
ListViewでは難しい場合が殆どっぽいです。
(全部を試してないので、あくまでも予想ですが)

なので、Widget 位置を知るためには、
SingleChildScrollView + Column を使って一気にレンダリングしてしまう必要があるみたいです。

ちなみに、そんな記述も見つけましたのでシェアしておきます。
https://stackoverflow.com/questions/49153087/flutter-scrolling-to-a-widget-in-listview

まとめ

殆ど ListView の方が使われると思いますが、
汎用性という意味では SingleChildScrollView + Column の方が高いように思えます。
特にスクロールするという意味では、ListViewだと破棄されてしまうので、SingleChildScrollView + Column の方がスクロールしやすいはずです。

ただ、描画コストがかかるという事を忘れてはいけません。以上。

おまけ

ListView が一度レンダリングしたものってどうなるんだろう?
と疑問に思ったので軽く調査するとどうやら破棄されるみたいですね。

その破棄された Widget をまた描画する際には再度レンダリングが必要みたいです。
その点で言うと、 SingleChildScrollView + Column は破棄される事がないので再度レンダリングする必要性がないみたいですね。

Discussion