美文网首页
fluttern使用长列表

fluttern使用长列表

作者: 何景根 | 来源:发表于2020-12-01 15:09 被阅读0次

标准的ListView构造函数适用于小列表。 为了处理包含大量数据的列表,最好使用ListView.builder构造函数。
ListView的构造函数需要一次创建所有项目,但ListView.builder的构造函数不需要,它将在列表项滚动到屏幕上时创建该列表项。

1. 创建一个数据源

首先,我们需要一个数据源来。例如,您的数据源可能是消息列表、搜索结果或商店中的产品。大多数情况下,这些数据将来自互联网或数据库。

在这个例子中,我们将使用List.generate构造函数生成拥有10000个字符串的列表

final items = new List<String>.generate(10000, (i) => "Item $i");

2. 将数据源转换成Widgets

为了显示我们的字符串列表,我们需要将每个字符串展现为一个Widget !
这正是ListView.builder发挥作用的地方。在我们的例子中,我们将每一行显示一个字符串

new ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return new ListTile(
      title: new Text('${items[index]}'),
    );
  },
);

完整的例子

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp(
    items: new List<String>.generate(10000, (i) => "Item $i"),
  ));
}

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

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

  @override
  Widget build(BuildContext context) {
    final title = 'Long List';

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

相关文章

  • fluttern使用长列表

    标准的ListView构造函数适用于小列表。 为了处理包含大量数据的列表,最好使用ListView.builder...

  • 学习小组Day2笔记--小明

    Linux基本命令 思维导图 思考题 1.ls输出的是横向的列表,怎样输出长格式列表 使用命令ls -l 另外,使...

  • HTML:列表实现

    作业内容 使用HTML实现如下列表 知识点 : HTML列表使用 无序列表 无序列表是一个项目的列表,此列项目使用...

  • Python:操作列表

    遍历列表 遍历列表可以使用Python中的for循环: 创建数字列表 使用range() 可以使用range()函...

  • python 列表

    列表 列表是通常用来存储相同元素的集合。 a、创建列表 使用中括号[ ]来创建列表,列表中的元素使用逗号(,)分隔...

  • Python基础(5) - 列表的操作

    列表与元组的连接方式 列表连接方式:使用加号连接(+) 列表连接方式:使用extend连接 元组连接方式:使用加号...

  • HTML学习笔记(二)

    HTML学习笔记(二) 使用列表 使用表格 使用表单 添加多媒体 使用列表 ...

  • 前端学习(九)

    列表: 1.无序列表2.有序列表3.定义列表 无序列表: 使用 创建无序列表,使用li在ul中创建一个列表项,一...

  • 2019-02-28第3次 列表

    第3次 列表 知识点 会使用有序列表实现数据展示 会使用无序列表实现数据展示【重点】 会使用定义列表实现数据展示【...

  • Markdown基础语法

    一、标题 文字前使用#,使用几个#代表几级标题,支持六级。 二、列表 无序列表:文字前使用-或* 有序列表:使用1...

网友评论

      本文标题:fluttern使用长列表

      本文链接:https://www.haomeiwen.com/subject/cfoxwktx.html