В виде сетки в шахматном порядке невозможно отобразить данные в 2 столбцах

#flutter #listview #flutter-layout #flutter-widget #staggered-gridview

#колебание #listview #трепещущий макет #трепещущий вид-виджет #в шахматном порядке-gridview

Вопрос:

Я новичок в Dart, поэтому, если эта проблема кажется тривиальной или не требуется, я приношу извинения!!

Я хочу реализовать макет сетки в стиле Pinterest для моей ленты, содержащий только 2 столбца. Я использую staggered_grid_layout и попытался реализовать ответ из вопроса stackoverflow. Вот мой код до сих пор:

home.dart

 SizedBox(
            height: 535,
            width: 180,
            child: new StaggeredGridView.countBuilder(
              crossAxisCount: 2,
              itemCount: 10,
              itemBuilder: (BuildContext context, int index) => Card(
                child: Column(
                  children: <Widget>[
                    Image.network(storiesList[index]),
                    Text("Some text"),
                  ],
                ),
              ),
              staggeredTileBuilder: (int index) =>
              new StaggeredTile.fit(2),
              mainAxisSpacing: 4.0,
              crossAxisSpacing: 4.0,
            ),
          )

ссылка на полный код

ПРИМЕЧАНИЕ: Я добавил SizedBox() , потому что получал Vertical viewport was given unbounded height ошибку, пожалуйста, порекомендуйте альтернативу, если это не подходит

Спасибо!

РЕДАКТИРОВАТЬ: как это выглядит сейчас

РЕДАКТИРОВАТЬ: как это должно выглядеть

Ответ №1:

Спасибо за обновление, ознакомьтесь с приведенным ниже кодом, нет необходимости в StaggeredGridView, вместо этого используйте GridTile,

 GridView.count(
          physics: const NeverScrollableScrollPhysics(),
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          crossAxisCount: 2,
          childAspectRatio: 1.0,              
          padding: const EdgeInsets.all(4.0),
          mainAxisSpacing: 4.0,
          crossAxisSpacing: 4.0,
          children: new List<Widget>.generate(3, (index) {
            return new GridTile(
              child: InkResponse(
                child: new Card(
                // color:Colors.white,
                child: new Center(
                  child: new Text('XYZ'),
                 ),
                ),
                enableFeedback: true,
                onTap: () => _onSelected(index, items[index].toString().substring(0,10)), // Whatever you want on tap
                ),
              );
          }),
        ),

1. да, но это заставило бы их оставаться с фиксированной шириной и высотой, но я хочу, чтобы высота одного элемента масштабировалась в соответствии с размещенным на нем изображением

2. Используйте MediaQuery для высоты и ширины, это будет увеличиваться и уменьшаться в зависимости от высоты и ширины вашего экрана, смотрите Приведенный ниже код :: height: MediaQuery.of (context).size.height / 5

Ответ №2:

CrossAxisCount это количество «плиток», на которые вы хотите разделить сетку. StaggeredTile.fit(x) это количество листов, которые вы хотите использовать для item[index] . Итак, если CrossAxisCount равно 2, StaggeredTile должно быть fit (1), если вам нужны 2 столбца. Вы даже можете сказать, что CrossAxisCount равно 8 и StaggeredTile.fit(4) для 2 столбцов, StaggeredTile.fit(2) для 4 столбцов… и так далее. Таким образом, вы можете изменять номера столбцов для каждой строки в зависимости от любого условия, установленного для StaggeredTile.fit .