flutter系列之:flutter中listview的高階用法

flydean發表於2023-01-03

簡介

一般情況下,我們使用Listview的方式是構建要展示的item,然後將這些item傳入ListView的建構函式即可,通常情況下這樣做是夠用了,但是不排除我們會有一些其他的特殊需求。

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

ListView的常規用法

ListView的常規用法就是直接使用ListView的建構函式來構造ListView中的各個item。

其中ListView有一個children屬性,它接收一個widget的list,這個list就是ListView中要呈現的物件。

我們來構造一個擁有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數目比較少的情況下是沒有任何問題的,如果item數目比較多的情況下,直接將所有的item都取出來放在ListView中就不太現實了。

幸好,ListView還提供了一個ListView.builder的方法,這個方法會按需進行item的建立,所以在item數目比較多的情況下是非常好用的。

還是上面的例子,這次我們要生成10000個item物件,然後將這些物件放在ListView中去,應該如何處理呢?

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

首先,我們構建一個items list,並將其傳入MyApp的StatelessWidget中:

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

然後就可以在MyApp的body中使用ListView.builder來構建item了:

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

ListView.builder是推薦用來建立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]),
            );
          },
        ),
      ),
    );
  }
}

建立不同型別的items

看到這裡,可能有同學會問了,ListView中是不是隻能建立一種item型別呢?答案當然是否定的。

不管是從ListView的建構函式構建還是從ListView.builder構建,我們都可以自由的建立不同型別的item。

當然最好的辦法就是使用ListView.builder,根據傳入的index的不同來建立不同的item。

還是上面的例子,我們可以在建立items陣列的時候就根據i的不同來生成不同的item型別,也可以如下所示,在itemBuilder中根據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]);
            }
          },
        )

非常的方便。

建立不同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]);
            }
          },
        ),
      ),
    );
  }
}

總結

ListView是我們在應用中會經常用到的一種widget,希望大家能夠靈活掌握。

本文的例子:https://github.com/ddean2009/learn-flutter.git

相關文章