Flutter StaggeredGridView недоступен в последней версии flutter_staggered_grid_view
Я пытаюсь создать GridView с переменной/динамической CrossAxisCount.
У меня есть FutureBuilder, получающий данные из API, и иногда мне нужно показывать по одному элементу в строке, а иногда мне нужно показывать два элемента в строке, в зависимости от некоторых свойств элемента.
Если быть более конкретным, то условие таково:
if (previousItem != null && items[index].idCategory != previousItem.idCategory && items[index].isOdd).
В списке элементов будет около 700 элементов, помните, что в большинстве конструкторов CrossAxisCount является конечным.
Я нашел следующий код в Stackoverflow, но он несовместим с последней версией flutter_staggered_grid_view.
У меня есть другие вещи в приложении, использующие версию 0.6.2 этого пакета, поэтому я не могу использовать версию ^0.4.0.
class Staggered extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: StaggeredGridView.count(
crossAxisCount: 2,
mainAxisSpacing: 5,
crossAxisSpacing: 5,
children: List.generate(14, (index){
return Container(
child: Center(
child: Text("${index+1}"),
),
color: Colors.blue,
);
}),
staggeredTiles: buildTiles(),
),
),
);
}
List<StaggeredTile> buildTiles(){
return List.generate(14, (index){
if ((index+1)%7 == 0){
return StaggeredTile.count(2, 1);
}else{
return StaggeredTile.count(1, 1);
}
});
}
}
обновлять: следующее — это именно то, чего я пытаюсь достичь, используя последнюю версию этого пакета.
return StaggeredGridView.countBuilder(
crossAxisCount: 2,
mainAxisSpacing: 4,
crossAxisSpacing: 4,
itemCount: cards.length,
itemBuilder: (context, index) {
return Container(
width: 187,
height: 210,
color: Colors.red,
child: Text('$index - ${cards[index].id} - ${cards[index].idStoreCategory}',
style: const TextStyle(color: Colors.white, fontSize: 20)),
);
},
staggeredTileBuilder: (index) {
final nextItem = index < cards.length - 1 ? cards[index + 1] : null;
if (nextItem != null && cards[index].idStoreCategory != nextItem.idStoreCategory && index.isEven) {
return StaggeredTile.count(2, 1);
} else {
return StaggeredTile.count(1, 1);
}
},
);```
Ответы 2
Итак, вам нужен собственный GridView виджет, который crossAxisCount отображается динамически в зависимости от вашего ответа API. Иногда один или N элементов подряд. Итак, здесь я написал для вас пример кода. Надеюсь, это вам поможет. Не стейсняйся спросить.
import "package:flutter/material.dart";
import "package:get/get.dart";
void main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return GetMaterialApp(
home: const Sample(),
theme: ThemeData(),
);
}
}
class Sample extends StatefulWidget {
const Sample({super.key});
@override
State<Sample> createState() => _SampleState();
}
class _SampleState extends State<Sample> {
int currentIndex = 0;
final List<List<dynamic>> items = <List<dynamic>>[
<dynamic>["Hello"],
<dynamic>["Hello", "World"],
<dynamic>["Hello", "World", "Yay!"],
<dynamic>["Hello"],
<dynamic>["Hello", "World"],
<dynamic>["Hello", "World", "Yay!"],
];
@override
Widget build(BuildContext context) {
if (currentIndex != 0) {
currentIndex = 0;
} else {}
return Scaffold(
body: SafeArea(
child: GridView.builder(
shrinkWrap: true,
itemCount: items.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: items[currentIndex].length,
childAspectRatio: 16 / 9,
),
itemBuilder: (BuildContext context, int builderIndex) {
currentIndex = builderIndex;
return Row(
children: List<Widget>.generate(
items[currentIndex].length,
(int listItemIndex) {
return SizedBox(
width: Get.width / items[currentIndex].length,
child: Text(items[currentIndex][listItemIndex]),
);
},
),
);
},
),
),
);
}
}
Предварительный просмотр:
Извините, я не смог понять точную ситуацию. Если у вас есть динамический 2D-список, номер списка N (по вертикали) и номер списка M (по горизонтали). Тогда я могу помочь вам и в этом. Итак, в этом случае список будет прокручиваться с двух сторон. Вертикально прокручиваемая и горизонтально прокручиваемая. В этом случае возможны 700 элементов по вертикали и 700 элементов по горизонтали.
Похоже, что произошло небольшое изменение API, в результате которого StaggeredGridView.count() переименовали в StaggeredGrid.count().
Достаточно просто опустить «Просмотр».
Условием отображения двух или одного элемента в строке будет
if (previousItem != null && items[index].idCategory != previousItem.idCategory && items[index].isOdd) {, поэтому нам придется что-то сделать внутри itemBuilder. Помимо SliverGridDelegateWithFixedCrossAxisCount, CrossAxisCount является окончательным, и иногда мы говорим о 700 элементах.