关于flutter:flutter系列之flutter中listview的高级用法

39次阅读

共计 2905 个字符,预计需要花费 8 分钟才能阅读完成。

简介

个别状况下,咱们应用 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

正文完
 0