如何加载更多的项目到一个列表时到达底部的结果Flutter

11dmarpk 于 2022-12-05 发布在 Flutter

关注(0)|答案(2)|浏览(126)

我有下面的代码，它从firebase提供了一个包含10个结果的列表。在这个例子中，它只显示了10个项目，现在我想，当用户得到结果的底部时，它会加载更多的10个项目并将其添加到列表中。我已经有了scrollController，它可以工作。当我得到结果的底部时，我会收到日志“LOAD HERE”。
我的疑问是如何在清单中添加新的10项？

scrollListener() async {
    if (scrollController.position.maxScrollExtent == scrollController.offset) {
      print('LOAD HERE');
    
    }
  }

  @override
  void initState() {
    scrollController.addListener(scrollListener);
    super.initState();
  }

  @override
  void dispose() {
    scrollController.removeListener(scrollListener);
    super.dispose();
  }

  loadList(submenu ,callback, context, deviceSize){
    return FutureBuilder(
      future: ctrlLab.loadList(submenu, 10),
      builder: (ctx, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: CircularProgressIndicator());
        } else if (snapshot.error != null) {
          print(snapshot.error);
          return Center(child: Text('ERROR!'));
        }else {
          return GridView.builder(
            padding: EdgeInsets.all(10.0),
            controller: scrollController,
            itemCount: snapshot.data.length,
            itemBuilder: (ctx, i) {
              Item item = snapshot.data[i];
              if (i < snapshot.data.length) {
                return Dismissible(
                  key: UniqueKey(),
                  direction: DismissDirection.endToStart,
                  background: Container(
                    padding: EdgeInsets.all(10.0),
                    color: Colors.grey[800],
                    child: Align(
                      alignment: AlignmentDirectional.centerEnd,
                      child: Icon(
                        Icons.delete,
                        color: Colors.white,
                        size: 40,
                      ),
                    ),
                  ),
                  onDismissed: (DismissDirection direction) {
                    ctrl.onDismissed(callback, item);
                  },
                  child: GestureDetector(
                    child: Card(
                      elevation: 5.0,
                      child: Padding(
                        padding: EdgeInsets.all(10.0),
                        child: GridTile(
                          child: Hero(
                            tag: "${item}",
                            child: item.imageUrl == null
                                ? setIconLab(item)
                                : CachedNetworkImage(
                              fit: BoxFit.cover,
                              imageUrl: setIconLab(item),
                              placeholder: (ctx, url) =>
                                  Center(child: CircularProgressIndicator()),
                              errorWidget: (context, url, error) =>
                                  Image.asset('assets/images/noPhoto.jpg',
                                      fit: BoxFit.cover),
                            ),
                          ),
                          footer: Container(
                            padding: EdgeInsets.all(8.0),
                            color: Colors.white70,
                            child: Column(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text(
                                  item.name
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                );

              }
            },
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCountAndLoading(
              itemCount: snapshot.data.length + 1,
              crossAxisCount: deviceSize.width < 600 ? 2 : 3,
              childAspectRatio: 0.7,
              crossAxisSpacing: 10.0,
              mainAxisSpacing: 10.0,
            ),
          );
        }
      },
    );
  }

flutter

来源：https://stackoverflow.com/questions/66267060/how-to-load-more-items-to-a-list-when-reach-the-bottom-of-results-flutter

2条答案

按热度按时间

8nuwlpux1#

在ListView中无限滚动

我已经通过使用本地字段而不是从firebase获取数据实现了这个案例。希望它能给予你一些想法。

import 'package:flutter/material.dart';

class ListViewDemo extends StatefulWidget {
  ListViewDemo({Key key}) : super(key: key);

  @override
  _ListViewDemoState createState() => _ListViewDemoState();
}

class _ListViewDemoState extends State<ListViewDemo> {
  ScrollController controller;
  int count = 15;

  @override
  void initState() {
    super.initState();
    controller = ScrollController()..addListener(handleScrolling);
  }

  void handleScrolling() {
    if (controller.offset >= controller.position.maxScrollExtent) {
      setState(() {
        count += 10;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('List view'),
      ),
      body: ListView.builder(
        controller: controller,
        itemCount: count,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            title: Text('Item $index'),
          );
        },
      ),
    );
  }

  @override
  void dispose() {
    controller.removeListener(handleScrolling);
    super.dispose();
  }
}

赞(0）回复(0）举报 2022-12-05

3ks5zfa02#

您必须将另外10个数据添加到crtLap.loadList(subMenu, 20)中，并在scrollListener中调用setState来重建有关更改的小部件。

var data = crtLap.loadList(subMenu, 10);

scrollListener() async {
  if (scrollController.position.maxScrollExtent == scrollController.offset) {
    setState((){
       data = crtLap.loadList(subMenu, 20);
     });
  }
}

并将此数据字段直接用于FutureBuilder，

loadList(submenu ,callback, context, deviceSize){
 return FutureBuilder(
   future: data,
    builder: (ctx, snapshot) {
    .....
  ...
..
}

赞(0）回复(0）举报 2022-12-05

我来回答

如何加载更多的项目到一个列表时到达底部的结果Flutter

2条答案

相关问题

热门标签

最新问答