如何获取有序的 StaggeredGridView

Question

我一直在开发社交媒体应用程序，但个人资料页面存在问题。这是我需要的图片：

这是我得到的图像：

如您所见，我希望图库中所有图片的图片大小都相同。但是，在我自定义 GridView 的第一个元素以包含有关用户的信息后，我得到了不同大小的图像。

在这里你可以看到我的网格代码：

StaggeredGridView.countBuilder(
    physics: NeverScrollableScrollPhysics(),
    shrinkWrap: true,
    crossAxisCount: 4,
    mainAxisSpacing: 3,
    crossAxisSpacing: 3,
    staggeredTileBuilder: (int index) =>
        new StaggeredTile.count(2, index.isEven ? 2 : 3),
    itemCount: _posts.length + 1,
    itemBuilder: (BuildContext context, int index) {
      if (index == 0) {
        return Padding(
          padding: const EdgeInsets.all(2),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(15),
              color: whiteColor,
              boxShadow: [
                BoxShadow(
                  color: Colors.black12,
                  offset: Offset(0.0, 2.0),
                  blurRadius: 6.0,
                ),
              ],
            ),
            padding: EdgeInsets.all(10),
            child: Column(
              children: [
                Row(
                  children: [
                    CircleAvatar(
                        radius: 15,
                        backgroundImage:
                            user.profileImageUrl.isEmpty
                                ? AssetImage(
                                    'assets/images/user.png')
                                : CachedNetworkImageProvider(
                                    user.profileImageUrl)),
                    SizedBox(width: 10),
                    Column(
                      crossAxisAlignment:
                          CrossAxisAlignment.start,
                      children: [
                        Text(
                          user.name,
                          style: TextStyle(
                            color:
                                Colors.black.withOpacity(0.75),
                            fontSize: 16,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
                SizedBox(height: 5),
                _buildStatRow(
                    'Followers', followerCount.toString()),
                _buildStatRow(
                    'Following', followingCount.toString()),
                _buildStatRow(
                    'Posts', _posts.length.toString()),
                _displayButton(user)
              ],
            ),
          ),
        );
      } else {
        Post post = _posts[index - 1];
        List<PostView> postViews = [];

        postViews.add(PostView(
          currentUserId: widget.currentUserId,
          post: post,
          author: _profileUser,
        ));

        return GestureDetector(
          onTap: () => Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => Container(
                //height: double.infinity,
                color: whiteColor,
                child: SingleChildScrollView(
                  child: Column(
                    children: postViews,
                  ),
                ),
              ),
            ),
          ),
          child: Container(
            decoration: BoxDecoration(
              color: Colors.transparent,
              borderRadius: BorderRadius.all(
                Radius.circular(15),
              ),
            ),
            child: ClipRRect(
              borderRadius:
                  BorderRadius.all(Radius.circular(7)),
              child: Image(
                image:
                    CachedNetworkImageProvider(post.imageUrl),
                fit: BoxFit.cover,
              ),
            ),
          ),
        );
      }
    },
  ),

顺便说一句，网格的第一个项目应该有不同的大小（较小的大小），这样其他图像就不会在一行中对齐。

Answer 1

我觉得你要修改：

staggeredTileBuilder: (int index) =>
  new StaggeredTile.count(2, index.isEven ? 2 : 3),

进入

staggeredTileBuilder: (int index) =>
  new StaggeredTile.count(2, index == 0  ? 2 : 3),

第一种情况，第一列的所有照片都是2x2的正方形，而第二列的照片都是2x3的长方形。在第二种情况下，只有第一项，即 header 和 name/followers/following/post 是一个正方形。

如何获取有序的 StaggeredGridView

How to get ordered StaggeredGridView

gridview

flutter

结果：