交错网格视图创建照片列而不是网格

Question

我试图创建一个交错网格视图小部件，但它创建的是照片列而不是网格。我想创建一个由3张照片组成的网格。我试图更改crossAxisCount和交错文件.fit.

这是我的小工具代码：

import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:flutter_svg/flutter_svg.dart';
class MyMediaWidget extends StatelessWidget {
final List<String> images = [
'assets/png/photo1.png',
'assets/png/photo2.png',
'assets/png/photo3.png',
'assets/png/photo4.png',
'assets/png/photo5.png',
'assets/png/photo6.png',
'assets/png/photo7.png',
'assets/png/photo8.png',
'assets/png/photo9.png',
];
@override
Widget build(BuildContext context) {
return StaggeredGridView.countBuilder(
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: ScrollPhysics(),
crossAxisCount: 3,
itemCount: images.length,
itemBuilder: (BuildContext context, int index) => Stack(
children: [
ClipRRect(
child: Image.asset(
images[index],
),
borderRadius: BorderRadius.circular(10),
),
Positioned(
top: 5,
right: 5,
child: InkWell(
onTap: () {},
child: SvgPicture.asset('assets/svg/close.svg', color: Color(0xFFCF6679),),
),
),
],
),
staggeredTileBuilder: (int index) => StaggeredTile.fit(3),
mainAxisSpacing: 10,
crossAxisSpacing: 10,
);
}
}

现在的情况如下：

Answer 1

将StaggeredTile.fit(3),更改为StaggeredTile.count(1,1),(第一个参数是您希望项目在水平方向/x轴上拉伸的程度，第二个参数是希望项目在垂直方向/y轴上拉伸多少(。

它基本上将您的横轴计数细分为更多的列。因此，如果你有6个十字轴。count(2,1(将把你的3个项目放在第一行，每个项目占据6个项目中的2个假想列。

现在你的代码和StaggeredTile.count(3,1)做的一样