Flutter：如何在无限滚动的 Gridview.count 下显示指标

Question

我正在构建一个简单的应用程序（某种类型的博客），只使用颤振而不使用其他库。

现在，我使用GridView.count 为新帖子实现了无限滚动，一切正常，

但我需要在列表末尾有一条消息和一个指示符，告诉用户等待告诉服务器加载新内容我找不到在我的代码上实现这样的事情的方法！！

到目前为止的代码：

class _BrandsSingle extends State<BrandsSingle> {

  List phones = [];
  ScrollController _scrollController = new ScrollController();
  int pageNumber = 1;
  bool loading = false;

  Future fetchPhonesByBrand(int page) async {

    page = pageNumber;
    loading = true;

    final response = await http.get('http://192.168.1.6:3000/reviews/${widget.id}/$page');

    if (response.statusCode == 200) {

      setState(() {
        phones.addAll(jsonDecode(response.body));
        loading = false;
      });

    } else {
      // If that call was not successful, throw an error.
      throw Exception('Failed to load post');
    }

  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  void initState() {
    this.fetchPhonesByBrand(pageNumber);
    super.initState();

    _scrollController.addListener( () {
      if ( _scrollController.position.pixels == _scrollController.position.maxScrollExtent ) {
        pageNumber++;
        print(pageNumber);
        fetchPhonesByBrand(pageNumber);
      }
    });
  }

  Widget build(BuildContext context) {
    // TODO: implement build
    if ( loading == true ) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.id),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              CircularProgressIndicator(),
              SizedBox( height: 15 ),
              Text(
                "من فضلك أنتظر قليلاً...",
                style: TextStyle(
                    fontSize: 20,
                    fontFamily: 'Mada'
                ),
              ),

            ],
          ),
        ),
      );
    }

    return Scaffold(
        appBar: AppBar(
            title: Text(
              widget.id.toUpperCase(),
              style: TextStyle(
                  letterSpacing: 2,
                  fontFamily: 'Mada'
              ),
            )
        ),
        body:  GridView.count(
          controller: _scrollController,
          crossAxisCount: 1,
          children: List.generate(
              phones.length,
                  (int index) {
                var phone = phones[index];

                return Card(
                  child: Ink.image(
                    image: NetworkImage(phone['image']),
                    child: InkWell(
                      onTap: () => Navigator.of(context).pushNamed('/phone', arguments: phone['id']),
                      child: Container(
                        decoration: BoxDecoration(
                          gradient: LinearGradient(
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                            colors: [Color.fromRGBO(0, 0, 0, 0), Color.fromRGBO(0, 0, 0, 0.7)],
                          ),
                        ),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: <Widget>[
                            Padding(
                              padding: EdgeInsets.only( bottom: 10, left: 10, right: 10 ),
                              child: Center(
                                child: Text(
                                  'مواصفات ${phone['title'].toString().toUpperCase()}',
                                  style: TextStyle(
                                    fontSize: 16,
                                    fontFamily: 'Mada',
                                    letterSpacing: 2,
                                    color: Colors.white,
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                );
              }
          ),
        ),
    );
  }
}

Answer 1

您可以将加载添加为列表的最后一项：

• List 长度应为 phones.length + 1
• 如果index <= phones.length - 1 你返回一个普通项目的Card
• 否则，您将返回加载小部件

您可能需要检查一些极端情况，例如：

• 如果列表为空
• 如果列表高度小于屏幕则不会滚动
• 如果某些请求失败
• 如果请求没有更多项目