潜在无限项目的列表：ListView.builder，StreamBuilder，FutureBuilder或其他？ [英] List of potentially infinite items: ListView.builder, StreamBuilder, FutureBuilder or something else?

问题描述

我需要开发从服务器加载的潜在无限项目的列表。当用户到达列表的末尾时，必须加载其他项目。

我正在寻找Web来了解如何最好地做到这一点。

I need to develop a list of potentially infinite items loaded from a server. When the user arrives to the end of the list other items must be loaded.
I am looking for the web to understand what is the best practice to do that in flutter.

这就是我发现的内容：

ListView.builder 与 ScrollController 会在末尾加载新项目，并使用以下代码：

ListView.builder with a ScrollController that load new items when it comes to the end, with this code:

if (_controller.position.pixels == _controller.position.maxScrollExtent) {
  // load other items
}

这种方法的问题是必须保存我从服务器加载的最后一页，以免再次加载相同的项目。

The problem of this approach is I have to save the last page I loaded from the server to not load same items again.

我还找到了 StreamBuilder ， FutureBuilder 和 PaginatedDataTable ，但我不确定它们是否是管理无限列表的正确小部件。

解决此问题的最佳方法是什么？

I also found StreamBuilder, FutureBuilder and PaginatedDataTable, but I am not sure if they are the correct widgets to manage infinite list.
What is the best approach of this problem?

推荐答案

我有一种非常有趣的技术来向您展示如何实现自己的期望结果我

I have a very interesting technique to show you how you can achieve your desired result in a best possible way.

免责声明

• 我已使用数据集显示如何在列表中附加新数据，而不是重复的数据


• 我已经演示了单击按钮时要追加数据的情况，以查看底部的即将出现的数据，您可以使用您的 scrollController 。您可以在 _loadMore（）

• I have used my data set to show how the list being appended with the new data, not the duplicate one
• I have demonstrated the data append when you click on a button, to see the upcoming data at the bottom, you can use your scrollController. You can do the operation in _loadMore()

想法

• 我们维护两个列表，一个是原始列表，另一个跟踪添加新数据。名称是 originalList 和 items 。


• 我们使用两个变量，一个是 perPageItems 可以根据我们的意愿显示项目，而 presentItems 可以保持到目前为止加载的数据量。它始于 0


• 在创建项目时，我们将其复制到项目以及

• We maintain two lists, one is original, and one which keep track of adding new data. Names are originalList and items.
• We use two variables, one is perPageItems to show case the items based upon our will and presentItems to maintain how much data loaded till now. It starts with 0
• While creating an item, we copy it to the items as well

按照代码进行，为了您的方便，我添加了大多数注释。希望您得到最终结果

Follow the code, and I have added most of the comments for your ease. Hope you get the end result

class _MyHomePageState extends State<MyHomePage> {
  int perPageItems  = 15;
  int presentItems = 0;
  
  List<String> items = List<String>();
  List<String> originalItems = new List.generate(100, (index) => 'Hello $index');

  @override
  void initState() {
    super.initState();
    
    // copying the data source to the other list
    items.addAll(originalItems.getRange(presentItems, presentItems + perPageItems));
    // updating the present Items now, since it has perPageItems now in the page
    presentItems = presentItems + perPageItems;
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Scrollbar(
        child: new ListView.builder(
          itemBuilder: (context, index) {
            // to check whether we have reached to the
            // the last page, which is the last item
            // as per the page count which is 15
            return (index == items.length ) ?
              Container(
                  color: Colors.greenAccent,
                  child: FlatButton(
                      child: Text("Load More"),
                      onPressed: () => _loadMore(),
                  ),
              ) : ListTile(
                  title: Text('${items[index]}'),
              );
          },
          // Here in the code itemCount if present i.e., 
          // no of items loaded is lessthan or equal to total no of items 
          // in original list then we return +1 so we can add LoadMore 
          // else we return the size of the list
          itemCount: (presentItems <= originalItems.length) ? items.length + 1 : items.length
        )
      ),
    );
  }

  // Here in the code if present + perPage will become new final no of 
  // list to be loaded is greater then out complete original list 
  // length then we pass originalItems.length in the getRange else we 
  // pass present + perPage in getRange
  void _loadMore() {
    setState(() {
        if((presentItems + perPageItems) > originalItems.length) {
            items.addAll(
                originalItems.getRange(presentItems, originalItems.length));
        } else {
            items.addAll(
                originalItems.getRange(presentItems, presentItems + perPageItems));
        }
        presentItems = presentItems + perPageItems;
    });
  }
}

结果

这篇关于潜在无限项目的列表：ListView.builder，StreamBuilder，FutureBuilder或其他？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！