詳解Flutter中l(wèi)istview的高級用法

更新時間：2023年01月04日 08:22:19 作者：flydean程序那些事

一般我們使用Listview的方式是構(gòu)建要展示的item，然后將這些item傳入ListView的構(gòu)造函數(shù)即可，通常情況下這樣做是夠用了，但是不排除我們會有一些其他的特殊需求。今天我們會來講解一下ListView的一些高級用法，希望對大家有所幫助

簡介

一般情況下，我們使用Listview的方式是構(gòu)建要展示的item，然后將這些item傳入ListView的構(gòu)造函數(shù)即可，通常情況下這樣做是夠用了，但是不排除我們會有一些其他的特殊需求。

今天我們會來講解一下ListView的一些高級用法。

ListView的常規(guī)用法

ListView的常規(guī)用法就是直接使用ListView的構(gòu)造函數(shù)來構(gòu)造ListView中的各個item。

其中ListView有一個children屬性，它接收一個widget的list，這個list就是ListView中要呈現(xiàn)的對象。

我們來構(gòu)造一個擁有100個item的ListView對象：

class CommonListViewApp extends StatelessWidget{
  const CommonListViewApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: List<Widget>.generate(100, (i) => Text('列表 $i')),
    );
  }
}

上面的例子中，我們簡單的使用List.generate方法生成了100個對象。

在item數(shù)目比較少的情況下是沒有任何問題的，如果item數(shù)目比較多的情況下，直接將所有的item都取出來放在ListView中就不太現(xiàn)實了。

幸好，ListView還提供了一個ListView.builder的方法，這個方法會按需進(jìn)行item的創(chuàng)建，所以在item數(shù)目比較多的情況下是非常好用的。

還是上面的例子，這次我們要生成10000個item對象，然后將這些對象放在ListView中去，應(yīng)該如何處理呢？

因為這次我們要使用builder,所以沒有必要在item生成的時候就創(chuàng)建好widget，我們可以將widget的創(chuàng)建放在ListView的builder中。

首先，我們構(gòu)建一個items list，并將其傳入MyApp的StatelessWidget中：

    MyApp(
      items: List<String>.generate(10000, (i) => '列表 $i'),
    )

然后就可以在MyApp的body中使用ListView.builder來構(gòu)建item了：

body: ListView.builder(
          itemCount: items.length,
          prototypeItem: ListTile(
            title: Text(items.first),
          ),
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        )

ListView.builder是推薦用來創(chuàng)建ListView的方式，上面的完整代碼如下：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MyApp(
      items: List<String>.generate(10000, (i) => '列表 $i'),
    ),
  );
}

class MyApp extends StatelessWidget {
  final List<String> items;

  const MyApp({Key? key, required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const title = 'ListView的使用';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: ListView.builder(
          itemCount: items.length,
          prototypeItem: ListTile(
            title: Text(items.first),
          ),
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        ),
      ),
    );
  }
}

創(chuàng)建不同類型的items

看到這里，可能有同學(xué)會問了，ListView中是不是只能創(chuàng)建一種item類型呢？答案當(dāng)然是否定的。

不管是從ListView的構(gòu)造函數(shù)構(gòu)建還是從ListView.builder構(gòu)建，我們都可以自由的創(chuàng)建不同類型的item。

當(dāng)然最好的辦法就是使用ListView.builder，根據(jù)傳入的index的不同來創(chuàng)建不同的item。

還是上面的例子，我們可以在創(chuàng)建items數(shù)組的時候就根據(jù)i的不同來生成不同的item類型，也可以如下所示，在itemBuilder中根據(jù)index的不同來返回不同的item：

body: ListView.builder(
          itemCount: items.length,
          prototypeItem: ListTile(
            title: Text(items.first),
          ),
          itemBuilder: (context, index) {
            if(index %2 == 0) {
              return ListTile(
                title: Text(items[index]),
              );
            }else{
              return Text(items[index]);
            }
          },
        )

非常的方便。

創(chuàng)建不同item的完整代碼如下：

import 'package:flutter/material.dart';

void main() {
  runApp(
    MyApp(
      items: List<String>.generate(10000, (i) => '列表 $i'),
    ),
  );
}

class MyApp extends StatelessWidget {
  final List<String> items;

  const MyApp({Key? key, required this.items}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    const title = 'ListView的使用';

    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(title),
        ),
        body: ListView.builder(
          itemCount: items.length,
          prototypeItem: ListTile(
            title: Text(items.first),
          ),
          itemBuilder: (context, index) {
            if(index %2 == 0) {
              return ListTile(
                title: Text(items[index]),
              );
            }else{
              return Text(items[index]);
            }
          },
        ),
      ),
    );
  }
}