Question

我正在构建一个简单的应用程序（某种类型的Blog），而没有其他库。

现在，我已经为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
否则，您将返回加载小部件

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

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

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

1 个答案: