时间戳

首页 > 解决方案 > 如何对 ListView.builder 进行分页？

flutter - 如何对 ListView.builder 进行分页？

问题描述

我正在部署一个社交媒体移动应用程序，我要做的最后一件事是分页。我查看了各种颤振博客等，并试图弄清楚，但是当我尝试这些代码时遇到了很多错误（不幸的是，我无法弄清楚用我的代码实现它们的方法。）

我想要的基本上是，当我在不同数量的帖子（例如 5 个帖子）之后向下滚动时，我的颤振应用程序将启动一个功能，如重新加载更多并给我更多帖子。我该怎么做？

Future<List<Post>> FetchPosts(http.Client client) async {
  List<Post> posts;
  List<Post> finalposts;
  final response = await http.get("$SERVER_IP/api/articles/?format=json");
  final parsed = jsonDecode(response.body).cast<Map<String, dynamic>>();
  posts = parsed.map<Post>((json) => Post.fromJSON(json)).toList();
  return posts;
}

class FeedScreen extends StatefulWidget{...}

class FeedScreenState extends State<FeedScreen> {
  FeedScreenState({Key key, this.posts});
  final List<Post> posts;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RefreshIndicator(
        onRefresh: refreshpage,
        child: FutureBuilder<List<Post>>(
          future: FetchPosts(http.Client()),
          builder: (context, snapshot) {
            if (snapshot.hasError) print(snapshot.error);

            return snapshot.hasData ?
            PostsList(posts: snapshot.data,user:user)
                : Center(
              child: CircularProgressIndicator(backgroundColor: Colors.pink,valueColor: new AlwaysStoppedAnimation<Color>(Colors.pinkAccent),
              ),);},),),);}}

class PostsList extends StatefulWidget{...}

class PostsListState extends State<PostsList> {
  final List<Post> posts;
  PostsListState({Key key, this.posts, this.user});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: posts.length,
      physics: ScrollPhysics(),
      itemBuilder: (context, index) {
        return AspectRatio(...);
      },);}}

标签： flutter

解决方案

如这个答案所示：Flutter ListView 延迟加载你可以ScrollController根据ScrollPosition

推荐阅读