飞镖/颤振-颤振-为什么ListView会变得无限大 [英] Dart/Flutter - Flutter - Why ListView is going infinite

问题描述

不确定，因为我刚刚开始使用Flutter和Dart构建东西.如果有人可以看一下代码并可以共享以下输入内容:

Not sure since I have just started building things with Flutter and Dart. If anyone can take a look at the code and can share inputs on:

• 如何显示具有固定项目数的listview，在我们的示例中，我们要获取100个项目
• 如何实现分页，首先要说我要获取第一页，然后在滚动第二页时依此类推.

问题:

在当前的实现中，我发现了2个问题:

In current implementation, I am finding 2 issues:

• 能够在底部无限滚动

• 在logcat输出中发现异常:

• Able to scroll endlessly at bottom

• Finding exception in logcat output:

03-15 06:14:36.464 3938-3968/com.technotalkative.flutterfriends I/flutter:引发了另一个异常:RangeError(index):无效值:不在0..99范围内，包括:100

03-15 06:14:36.464 3938-3968/com.technotalkative.flutterfriends I/flutter: Another exception was thrown: RangeError (index): Invalid value: Not in range 0..99, inclusive: 100

我已经在我的Github存储库中发布了相同的问题: https://github. com/PareshMayani/Flutter-Friends/issues/1

I have posted the same issue on my Github repository: https://github.com/PareshMayani/Flutter-Friends/issues/1

如果您对此回购有贡献，将不胜感激！

Would appreciate if you contribute to this repo!

推荐答案

那是因为您使用的是 ListView.builder 实际上在未指定itemCount时呈现无限列表.尝试将itemCount指定为100.

That is beacuse you are using ListView.builder which actually renders an infinite list when itemCount is not specified. Try specifying itemCount to 100.

对于分页，使用ListView.builder的最简单解决方案是在列表到达末尾时显示刷新小部件并启动刷新api调用，然后将新项目添加到列表中并增加项目数.

For pagination, the simplest solution with a ListView.builder would be to show a refresh widget when the list has reached its end and initiate a refresh api call, and then add new items to the list and increase item count.

示例:

class Example extends StatefulWidget {
  @override
  _ExampleState createState() => new _ExampleState();
}

class _ExampleState extends State<Example> {

  // initial item count, in your case `_itemCount = _friendList.length` initially
  int _itemCount = 10;

  void _refreshFriendList() {
    debugPrint("List Reached End - Refreshing");

    // Make api call to fetch new data
    new Future<dynamic>.delayed(new Duration(seconds: 5)).then((_){
        // after new data received
        // add the new data to the existing list
        setState(() {
          _itemCount = _itemCount + 10; // update the item count to notify newly added friend list
          // in your case `_itemCount = _friendList.length` or `_itemCount = _itemCount + newData.length`
        });
    });
  }

  // Function that initiates a refresh and returns a CircularProgressIndicator - Call when list reaches its end
  Widget _reachedEnd(){
    _refreshFriendList();
    return const Padding(
      padding: const EdgeInsets.all(20.0),
      child: const Center(
        child: const CircularProgressIndicator(),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(),

      // ListView Builder
      body: new ListView.builder(
        itemCount: _itemCount + 1,
        itemBuilder: (_, index) {
          final Widget listTile = index == _itemCount // check if the list has reached its end, if reached end initiate refresh and return refresh indicator
              ? _reachedEnd() // Initiate refresh and get Refresh Widget
              : new Container(
                  height: 50.0,
                  color: Colors.primaries[index%Colors.primaries.length],
                );
          return listTile;
        },
      ),
    );
  }
}

希望有帮助！

注意:我并不是说这是最好的方法，也不是最优方法，但这是实现它的方法之一.有一个示例git的社交网络应用程序以不同的方式执行它，您可以看一下

Note: I'm not claiming this is the best way or is optimal but this is one of the ways of doing it. There is an example social networking app of git which does it in a different way, you can take a look at it here.

这篇关于飞镖/颤振-颤振-为什么ListView会变得无限大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！