交错的 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,);
  }
}

And here is how it looks now:

解决方法

将 StaggeredTile.fit(3), 改为 StaggeredTile.count(1,1), （第一个参数是您希望项目水平/x 轴拉伸多少，第二个参数是您希望它垂直/y 轴拉伸多少）。

它基本上将您的横轴计数细分为更多的列。因此，如果您有 6 个横轴，则 .count(2,1) 会将您的 3 个项目放在第一行，每个项目占据 6 个虚拟列中的 2 个。

现在您的代码与 StaggeredTile.count(3,1) 所做的相同。