交错的 Gridview 创建照片列而不是网格答案

【问题标题】：Staggered Gridview creates column of photos instead of grid交错的 Gridview 创建照片列而不是网格
【发布时间】：2021-04-27 16:55:13
【问题描述】：

我试图创建一个交错的 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:

【问题讨论】：

标签： flutter staggered-gridview

【解决方案1】：

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

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

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

【讨论】：