快捷導(dǎo)航

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

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

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

簡(jiǎn)介

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

今天我們會(huì)來(lái)講解一下ListView的一些高級(jí)用法。

ListView的常規(guī)用法

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

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

我們來(lái)構(gòu)造一個(gè)擁有100個(gè)item的ListView對(duì)象：

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')),
    );
  }
}

上面的例子中，我們簡(jiǎn)單的使用List.generate方法生成了100個(gè)對(duì)象。

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

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

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

因?yàn)檫@次我們要使用builder,所以沒(méi)有必要在item生成的時(shí)候就創(chuàng)建好widget，我們可以將widget的創(chuàng)建放在ListView的builder中。

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

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

然后就可以在MyApp的body中使用ListView.builder來(lái)構(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是推薦用來(lái)創(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)建不同類(lèi)型的items

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

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

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

還是上面的例子，我們可以在創(chuàng)建items數(shù)組的時(shí)候就根據(jù)i的不同來(lái)生成不同的item類(lèi)型，也可以如下所示，在itemBuilder中根據(jù)index的不同來(lái)返回不同的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]);
            }
          },
        ),
      ),
    );
  }
}