如何在 flutter 中制作像 Pinteret 一样的 Scrollable StaggeredGrid 列表

Question

我尝试使用 flutter_staggered_grid_view 0.6.1 我能够创建列表但无法使列表可滚动。 如果有任何其他我可以使用的库，或者是否有任何其他方式使其可滚动。 此版本 0.6.1 已使 StaggeredGridList 在没有良好文档的情况下不可滚动。

还有谁能告诉我为什么我的自定义卡片高度不好？

import 'package:flutter/material.dart';


class DisplayCard extends StatelessWidget {
  DisplayCard(
      {this.profileImagePath,
      this.captionText,
      this.profileName,
      this.timeStamp});

  final String? profileImagePath;
  final String? profileName;
  final String? captionText;
  final String? timeStamp;

  @override
  Widget build(BuildContext context) {
    return Card(
      clipBehavior: Clip.antiAlias,
      child: Container(
        height: 190,
        width: 180,
        child: Column(
          children: [
            Image(
              image: AssetImage(profileImagePath!),
            ),
            Container(
              child: Row(
                children: [
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.fromLTRB(10, 7, 5, 2),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          RichText(
                            text: TextSpan(
                                style: const TextStyle(
                                  fontSize: 10,
                                  color: Colors.black87,
                                ),
                                children: [
                                  TextSpan(
                                    text: profileName,
                                    style: const TextStyle(
                                      fontSize: 10,
                                      color: Colors.black87,
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                  const TextSpan(text: ' '),
                                  TextSpan(text: captionText),
                                ]),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(top: 3.0),
                            child: Text(
                              timeStamp!,
                              style: const TextStyle(
                                fontSize: 10,
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                    flex: 3,
                  ),
                  Expanded(
                    child: CircleAvatar(
                      backgroundImage: AssetImage(profileImagePath!),
                      radius: 13,
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
      elevation: 10,
      shadowColor: Colors.black,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15),
      ),
    );
  }
}

Answer 1

1. 您应该使用此小部件 MasonryGridView in that package. I assume you're using StaggeredGrid，文档中提到它不可滚动。如果您事先知道列表长度，请不要忘记添加 itemCount（文档中未提及）。
2. 图片高度比容器高度长。