在 Flutter 中停止 Listview.builder答案

【问题标题】：Stop Listview.builder in Flutter在 Flutter 中停止 Listview.builder
【发布时间】：2021-04-30 05:30:35
【问题描述】：

我正在从一个 WordPress 实例加载文章，我想在 ListView 中显示这些文章，但是我不想只在开头加载所有文章的列表，因为这最终可能会很多。所以我想我可以用 FutureBuilders 制作一个 Listview.builder ，然后每次加载几篇文章，但是我有一个问题，即用户有时会到达我想要 ListView.builder 的文章末尾停止加载，因为没有更多文章可供加载。是否有此功能，或者如何使用 Flutter 执行此操作？此外，如果 Listview.Builder 一次只构建一个 Future Builder 会很好，这样屏幕上就不会出现 10 个加载图标。

这是我的代码：

ListView.builder(
                    //controller: _scrollController,
                    physics: BouncingScrollPhysics(),
                    padding: EdgeInsets.symmetric(
                      horizontal: 15,
                      vertical: 15,
                    ),
                    scrollDirection: Axis.vertical,
                    // separatorBuilder: (context, index) {
                    //   return SizedBox(
                    //     height: 15,
                    //   );
                    // },
                    // itemCount: this.articleList.length,
                    itemBuilder: (context, index) {
                      return FutureBuilder(
                        future: Article().getArticleList(index+1),
                        // ignore: missing_return
                        builder: (context, snapshot){
                          // ignore: missing_enum_constant_in_switch
                          switch (snapshot.connectionState){
                            case ConnectionState.none:
                            case ConnectionState.waiting:
                              return SpinKitWave(
                                color: Colors.red,
                              );
                            case ConnectionState.done:
                            case ConnectionState.active:
                              if (snapshot.hasData)
                                return ListView.builder(
                                  shrinkWrap: true,
                                  primary: false,
                                  itemCount: snapshot.data.length,
                                  itemBuilder: (context, index){
                                    return SomeWidgetThatDisplaysTheArticle;
                                  },
                                );
                              return Text("Ende");
                          }
                        },
                      );
                    },
                  ),

提前致谢

【问题讨论】：

分享示例_code
我添加了代码

标签： flutter flutter-listview flutter-futurebuilder

【解决方案1】：

指定一个整数。

int itemcount = 25; //指定列表视图项的初始显示数量。

ListView.builder(
                        //controller: _scrollController,
                        physics: BouncingScrollPhysics(),
                        padding: EdgeInsets.symmetric(
                          horizontal: 15,
                          vertical: 15,
                        ),
                        scrollDirection: Axis.vertical,
                        // separatorBuilder: (context, index) {
                        //   return SizedBox(
                        //     height: 15,
                        //   );
                        // },
                        // itemCount: this.articleList.length,
                        itemBuilder: (context, index) {
                          return FutureBuilder(
                            future: Article().getArticleList(index+1),
                            // ignore: missing_return
                            builder: (context, snapshot){
                              // ignore: missing_enum_constant_in_switch
                              switch (snapshot.connectionState){
                                case ConnectionState.none:
                                case ConnectionState.waiting:
                                  return SpinKitWave(
                                    color: Colors.red,
                                  );
                                case ConnectionState.done:
                                case ConnectionState.active:
                                  if (snapshot.hasData)
                                    return ListView.builder(
                                      shrinkWrap: true,
                                      primary: false,
                                      itemCount:itemcount,
                                      itemBuilder: (context, index){
                                        return SomeWidgetThatDisplaysTheArticle;
                                      },
                                    );
                                  return Text("Ende");
                              }
                            },
                          );
                        },
                      ),

然后在末尾添加一个凸起的按钮并指定按下以增加 itemcount ：

    onPressed(){
    setState((){
    itemCount = Fieldvalue.increment(10); //This will increase the itemCount by 10 so itemcount will become 35 .
    });

}

【讨论】：

【解决方案2】：

将列表限制为 10 个项目

ListView.builder(
                //controller: _scrollController,
                physics: BouncingScrollPhysics(),
                padding: EdgeInsets.symmetric(
                  horizontal: 15,
                  vertical: 15,
                ),
                scrollDirection: Axis.vertical,
                // separatorBuilder: (context, index) {
                //   return SizedBox(
                //     height: 15,
                //   );
                // },
                // itemCount: this.articleList.length,
                itemBuilder: (context, index) {
                  return FutureBuilder(
                    future: Article().getArticleList(index+1),
                    // ignore: missing_return
                    builder: (context, snapshot){
                      // ignore: missing_enum_constant_in_switch
                      switch (snapshot.connectionState){
                        case ConnectionState.none:
                        case ConnectionState.waiting:
                          return SpinKitWave(
                            color: Colors.red,
                          );
                        case ConnectionState.done:
                        case ConnectionState.active:
                          if (snapshot.hasData)
                            return ListView.builder(
                              shrinkWrap: true,
                              primary: false,
                              itemCount: snapshot.data.length,
                              itemBuilder: (context, index){
                                return SomeWidgetThatDisplaysTheArticle;
                              },
                            );
                          return if(index<11) Text("Ende");
                      }
                    },
                  );
                },
              ),

【讨论】：