Flutter应用程序中的无限列表 [英] Infinite List in Flutter Application

问题描述

我正在将应用程序从android迁移到flutter，直到现在我在flutter中使用了 ListView .我的问题是，是否有专门的技术来处理抖动中的大量数据?作为参考，您可以查看android RecyclerView .它处理内存中的视图并回收其运行时.那么如何在Flutter中实现RecyclerView之类的功能呢?还是不需要扑打?

I am migrating my application from android to flutter and till now I have used ListView in a flutter. my question is, is there any specialized technique to handle a large amount of data in the flutter? for reference, you can look at android RecyclerView. it handles in-memory views and recycles its runtime. so how to achieve functionality like RecyclerView in Flutter? or it's not necessary for the flutter?

推荐答案

最简单的方法是使用ListView.builder而不指定itemCount参数.

The easiest way is to use a ListView.builder without specifying the itemCount parameter.

这是最简单的示例:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Infinite List"),
      ),
      body: ListView.builder(
        itemBuilder: (context, index) {
          return Text("$index");
        },
      ),
    );
  }
}

稍后，您可以通过获取实际数据来增强此功能.等待新数据时，您可以在列表的最后一项中显示"CircularProgressIndicator".

Later, you can enhance this by fetching real data. You could show a 'CircularProgressIndicator' in the last item of the list while waiting for the new data.

  body: ListView.builder(
    itemBuilder: (context, index) {
      if (index < data.length) {
        // Show your info
        Text("$index");
      } else {
        getMoreData();
        return Center(child: CircularProgressIndicator());
      }
    },
    itemCount: data.length + 1,
  ),

您会看到我们通过添加索引来欺骗列表，并在显示最终索引时调用更多数据.

You can see that we trick the list by adding an index, and calling for more data when displaying that final index.

getMoreData()将包括对setState()的调用，以强制重建并考虑新数据.

getMoreData() would include a call to setState() to force a rebuild and to take into account the new data.

这篇关于Flutter应用程序中的无限列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！