#flutter #dart #grid
#flutter #dart #сетка
Вопрос:
Мне нужна помощь в замене первого элемента StaggeredGridView другим виджетом, скажем, контейнером. Я пытался изменить его в течение нескольких часов, но не мог найти способ.
Padding(
padding: const EdgeInsets.all(5.0),
child: new StaggeredGridView.countBuilder(
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
crossAxisCount: 4,
mainAxisSpacing: 3,
crossAxisSpacing: 3,
itemCount: posts.length,
itemBuilder: (BuildContext context, int index) {
Post post = posts[index];
return Container(
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.all(Radius.circular(15))),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(7)),
child: Image(
image: AssetImage(post.imageUrl),
fit: BoxFit.cover,
),
),
);
},
staggeredTileBuilder: (int index) =>
new StaggeredTile.count(2, index.isEven ? 3 : 2),
),
),
Выше приведен код для сетки, которую я использую.
Спасибо.
Комментарии:
1. Первая картинка — это дизайн, который мне нужен. Второе — это то, что я получаю сейчас.
Ответ №1:
itemBuilder
сгенерирует виджет с предоставленной функцией, поэтому вы можете просто добавить if statement
для создания того или иного виджета:
itemCount: posts.length 1, // added one item on the beginning
itemBuilder: (BuildContext context, int index) {
if (index == 0) {
return Container(
child: // your widget
);
} else {
Post post = posts[index - 1]; // remember that you have 1 on your index
return Container(
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.all(Radius.circular(15))),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(7)),
child: Image(
image: AssetImage(post.imageUrl),
fit: BoxFit.cover,
),
),
);
}
},