Блог

Главная - Вопросы по программированию - Заполнение сетки дротиками-дротиками с выборкой по API

Заполнение сетки дротиками-дротиками с выборкой по API

#dart #flutter

#дротик

Вопрос:

есть ли какой-либо рабочий пример сетки SliverGrid, заполненной выборкой? Все найденные мной примеры относятся к статическому / типизированному контенту.

Я хочу заполнить SliverGrid динамическим контентом, извлеченным из API.

Редактировать

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

Я попытался добавить другой SliverToBoxAdapter с вертикальным отображением списка, но затем прокрутка перестает работать, и требуется определить высоту.

Я хочу знать, могу ли я заполнить SliverGrid таким же образом, как ListView, и как это сделать, поскольку я не могу найти ни одного примера.

Я не хочу выглядеть ленивым, но я новичок в Flutter и не знаю, как этого добиться.

 return Scaffold(
        body: CustomScrollView(
          slivers: [
            SliverAppBar(
                //SOME OPTIONS AND VALUES HERE
            ),
            SliverToBoxAdapter(
              // this is populated with a fetch
              //child: NiceWidgetHere(), 
            ),
            SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                childAspectRatio: 1.5,
              ),
              delegate: SliverChildBuilderDelegate(
                 // Don't know what to do here
                //(context, index) => AnotherNiceWidgetHere(),
              ),
            )
          ],
        )
    );

На изображении ниже вы можете увидеть макет, который у меня есть. Как горизонтальный ListView, так и вертикальный GridView должны извлекать содержимое из json API, выборка не является проблемой, поскольку уже работает в горизонтальном ListView.

Макет приложения

Комментарии:

1. превратите возврат вашего HTTP-вызова в виджет. Для достижения этого вы можете использовать FutureBuilder.

2. Привет @RubensMelo спасибо за ваш ответ, я погуглил FutureBuilder и не нашел ничего близкого к тому, что мне нужно. Также в документации нет более подробной информации docs.flutter.io/flutter/widgets/FutureBuilder-class.html

3. FutureBuilder — это что-то вроде: «создайте любой виджет с вашим ответом json». В вашем случае дочерним NiceWidgetHere() и AnotherNiceWidgetHere() должно быть FutureBuilder(), параметром future в FutureBuilder должен быть возврат вашего http-вызова, а builder должен возвращать любой виджет, который вы хотите.

Ответ №1:

Вы должны использовать FutureBuilder, как заявили другие. Я сделал это, обернув все в SliverChildBuilderDelegate в FutureBuilder. Вот моя рабочая копия.

 Widget build(BuildContext context) {   
    APIServiceProvider  api = APIServiceProvider();
    Future<List<AttributeModel>> attributesListFuture = api.getAttributes();

    return SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
      delegate: SliverChildBuilderDelegate(
            (BuildContext context,int index)
            {
              return FutureBuilder(
                future: attributesListFuture ,
                builder: (context, snapshot)
                {

                      return snapshot.connectionState == ConnectionState.done? snapshot.hasData
                      ? HomeIconCell(snapshot.data[index])
                      :  Text('Retry')
                  : Text('progress');

                },
                ); 
            },
    ));
  }