【Flutter】ListViewとSingleChildScrollViewの違い

今回はスクロール可能なリストを表示できるListViewSingleChildScrollViewの違いを紹介します。

\ 世界最大級のオンライン学習サービス /

目次

まずはスクリーンを見て違いをチェック

ListView(ListView.builder)の場合

ListView.builder(
  itemCount: 100,
  itemBuilder: (context, index) {
    return Text(
      'item $index',
      style: TextStyle(fontSize: 20),
    );
  },
),

SingleChildScrollViewの場合

SingleChildScrollView(
  child: Column(
    children: List.generate(100, (index) {
      return Text(
        'item $index',
        style: TextStyle(fontSize: 20),
      );
    }),
  ),
),

外見に違いなし

ListViewSingleChildScrollViewそれぞれのスクリーンを見れば分かりますが外見に特に変化はありません。

違いはレンダリングの範囲

ListViewSingleChildScrollViewの違いはレンダリングの範囲です。

ListViewの場合はスクリーンで見える範囲に表示されるWidgetだけレンダリング(可視化)しているのに対し、SingleChildScrollViewではスクリーン外の要素全てをレンダリングしています。

SingleChildScrollViewの方がスムーズにスクロールできる

お互いの機能自体はほぼ同じですがSingleChildScrollViewの方が滑らかにスクロールできます。

一緒に読みたい

参考

  • URLをコピーしました!
目次