Нижний колонтитул Flutter GridView (для указания нагрузки с бесконечной прокруткой)

У меня есть GridView, который работает довольно гладко. Я использую сетку в контексте бесконечной прокрутки, где больше предметов загружается через REST API, когда прокрутка приближается к нижней. Здесь нет проблем.

Однако я хочу показать индикатор загрузки в нижней части сетки. Этот виджет должен охватывать все столбцы в сетке , но все равно должен быть частью прокручиваемого содержимого.

Я новичок в Флаттере и потерял, как это сделать.

Мой (рабочий) GridView создается таким образом:

return new GridView.builder(
  gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: _COLUMN_COUNT),
  controller: widget.scrollController,
  itemCount: widget.items.length,
  itemBuilder: (BuildContext context, int index) {
    return new _ItemView(item: widget.items[index]);
  },
);

gridview,scroll,dart,infinite-scroll,flutter,

5

Ответов: 2


5 принят

Wrap SliverGrid от CustomScrollView:

return new CustomScrollView(slivers: <Widget>[
  new SliverGrid(
    gridDelegate: yourGridDelegate,
    delegate: yourBuilderDelegate,
  ),
  new SliverToBoxAdapter(
    child: yourFooter,
  ),
]);

0

Я не уверен, каким образом вы строите свой макет, независимо от того, я знаю, что он немного отличается от того, о чем вы думали, но это звучит для меня как хороший вариант использования Circularsnapshot.hasData.

Обратите внимание, что в моем случае он продолжает загружаться, потому что мой falseвсегда ProgressIndicator. Всякий раз, когда ваши данные загружаются, они заменяют ProgressIndicatorлюбые данные, которые вы изначально собираетесь вводить внутри ваших виджетов.

введите описание изображения здесь

@override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(title: new Text("GridView Test"),
        ),
        body: new FutureBuilder(future: _getAsyncStuff(),
            builder: (BuildContext context,
                AsyncSnapshot<DataSnapshot> snapshot) {
              return new GridView.builder(
                  gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: 3),
                  itemBuilder: (BuildContext context, int index) {
                    return new Card(child:
                    !snapshot.hasData ? new CircularProgressIndicator(
                      strokeWidth: 0.8,) : new Text("Snapshot data#$index")
                    );
                  });
            })

    );
  }
}
GridView, свиток, дротик, бесконечна улитка, флаттер,
Похожие вопросы