如何解决交错的 Gridview 创建照片列而不是网格
我试图创建一个交错的网格视图小部件,但它创建的是照片列而不是网格。 我想创建一个连续 3 张照片的照片网格。 我试图改变 crossAxisCount 和 StaggeredTile.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,);
}
}
解决方法
将 StaggeredTile.fit(3),
改为 StaggeredTile.count(1,1),
(第一个参数是您希望项目水平/x 轴拉伸多少,第二个参数是您希望它垂直/y 轴拉伸多少)。
它基本上将您的横轴计数细分为更多的列。因此,如果您有 6 个横轴,则 .count(2,1) 会将您的 3 个项目放在第一行,每个项目占据 6 个虚拟列中的 2 个。
现在您的代码与 StaggeredTile.count(3,1)
所做的相同。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。