在无限滚动 Flutter 中添加 CircularProgressIndicator

Question

我做了无限滚动，但我想在加载列表项时添加 CircularProgressIndicator，但我做不到。那么如何根据代码添加 CircularProgressIndicator 下来：

  ListView.builder( 
    padding: EdgeInsets.symmetric(
    vertical: 10, horizontal: 10),
    scrollDirection: Axis.vertical,
    shrinkWrap: true,
    primary: false,
    itemCount: _con.brandComplaints.length,
    itemBuilder: (context, index) {
     if (_con.isLoadingComplaints == false) {
            return Padding(
                 padding: const EdgeInsets.only(
                 bottom: 15.0),
                 child: ComplaintItemWidget(
                 complaint: _con.brandComplaints
                .elementAt(index),
                  ),
               );
    } else {
           return Center(
             child: CircularProgressIndicator());
                     }
                   },
               ),

----------------滚动列表项的滚动侦听器 ------------- ---------------------

  _scrollListener() {
    if (int.parse(_con.brand.complaintTotal) == _con.brandComplaints.length) {
      return;
    }
    //print(_scrollController.position.extentAfter);
    if (_scrollController.position.extentAfter <= 0 && isPageLoading ==false) {

      _con.listenForBrandComplaints(_con.brand.id);
    }
  }

---------------控制器------- ------------

  void listenForBrandComplaints(String idBrand) async {
    //setState(() => isLoadingComplaints = true);
    final Stream<Complaint> stream =
        await getBrandComplaints(idBrand, brandComplaints.length);
    stream.listen((Complaint _complaint) {
      setState(() => brandComplaints.add(_complaint));
    }, onError: (a) {
      //setState(() => isLoadingComplaints = false);
      print(a);
    }, onDone: () {
      //setState(() => isLoadingComplaints = false);
      //complaintOffset += brandComplaints.length;
    });
  }

Answer 1

您可以通过使用Stack 小部件并将CircularProgressIndicator 与ListView 重叠来实现此目的。查看下面的代码以获取简化示例：

class LoadingOnScroll60619794 extends StatefulWidget {
  @override
  _LoadingOnScroll60619794State createState() => _LoadingOnScroll60619794State();
}

class _LoadingOnScroll60619794State extends State<LoadingOnScroll60619794> {
  bool _loading = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.refresh),
            onPressed: runLoading
          ),
        ],
      ),
      body: Stack(
        children: <Widget>[
          ListView(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('item 1'),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('item 1'),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('item 1'),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('item 1'),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('item 1'),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('item 1'),
              ),
            ],
          ),
          _loading
            ? Center(
              child: CircularProgressIndicator(),
            )
            : SizedBox(width: 0, height: 0,)
        ],
      ),
    );
  }

  void runLoading(){
    setState(() {
      _loading = true;
    });
    Timer(Duration(milliseconds: 1500), (){
      setState(() {
        _loading = false;
      });
    });
  }
}