Flutter 包含多列和常量宽度/高度卡的Listview

我有一个问题，使滚动列表视图与2列（完美的将是灵活的列计数取决于屏幕宽度），垂直滚动。在这个列表中，将是具有常量高度和宽度的卡片

我尝试过gridview.count制作2列，但一直都是按屏幕大小缩放的（我使用过childAspectRatio，但没有预期效果）。还尝试将ConstrainedBox用作我的卡的主要小部件，但不起作用

想一提的是，这款应用程序同样适用于iOS和android

class SongbookCardList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;

    /*24 is for notification bar on Android*/

    final double itemHeight = (size.height - kToolbarHeight - 24) / 2;
    final double itemWidth = size.width / 2;

    return Container(
      child: GridView.count(
        // childAspectRatio: (itemWidth / itemHeight),
        shrinkWrap: true,
        padding: EdgeInsets.only(top: 20, left: 15, right: 15),
        mainAxisSpacing: 15,
        crossAxisSpacing: 10,
        crossAxisCount: 2,
        children: [
          SongbookCard(),
          SongbookCard(),
          SongbookCard(),
          SongbookCard(),
          SongbookCard(),
        ],
      ),
    );
  }
}

class SongbookCard extends StatelessWidget {
  final SongBookWidgetStyle style = const SongBookWidgetStyle();
  @override
  Widget build(BuildContext context) {
    return ConstrainedBox(
      constraints: const BoxConstraints(
          maxWidth: 150, maxHeight: 140, minHeight: 140, minWidth: 150),
      child: NeumorphicButton(
        onPressed: () {},
        boxShape: NeumorphicBoxShape.roundRect(
            BorderRadius.circular(style.borderRadius)),
        style: style.neumorphicStyle,
        padding: const EdgeInsets.only(top: 16.0),
        child: Column(
          children: <Widget>[
            Flexible(
              flex: 8,
              child: ClipRRect(
                child: Container(
                  decoration: BoxDecoration(
                      borderRadius:
                          const BorderRadius.all(Radius.circular(12.0)),
                      color: ColorsExtension.appPurple),
                  width: 120,
                  height: 120,
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(top: 8.0),
              child: Text(
                'test',
                textAlign: TextAlign.center,
              ),
            )
          ],
        ),
      ),
    );
  }
}

class SongbookCardList扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
最终大小=MediaQuery.of（context）.Size；
/*24是Android上的通知栏*/
最终双项目高度=（size.height-kToolbarHeight-24）/2；
最终双项目宽度=size.width/2；
返回容器(
子项：GridView.count(
//childAspectRatio:（项目宽度/项目高度），
收缩膜：对，
填充：仅限边缘设置（顶部：20，左侧：15，右侧：15），
平均间距：15，
横轴间距：10，
交叉轴计数：2，
儿童：[
SongbookCard（），
SongbookCard（），
SongbookCard（），
SongbookCard（），
SongbookCard（），
],
),
);
}
}
类SongbookCard扩展了一个小部件{
final SongBookWidgetStyle=const SongBookWidgetStyle（）；
@凌驾
小部件构建（构建上下文）{
返回约束框(
约束：const-BoxConstraints(
最大宽度：150，最大高度：140，最小高度：140，最小宽度：150），
子：NeumorphicButton(
按下：（）{}，
boxShape:NeumorphicBoxShape.roundRect(
BorderRadius.circular（样式.BorderRadius）），
style:style.neumorphicStyle，
填充：仅限常量边集（顶部：16.0），
子：列(
儿童：[
灵活的(
弹性：8，
孩子：ClipRRect(
子：容器(
装饰：盒子装饰(
边界半径：
常数边界半径所有（半径圆形（12.0）），
颜色：ColorsExtension.appPurple），
宽度：120，
身高：120，
),
),
),
填充物(
填充：仅限常量边集（顶部：8.0），
子：文本(
"测试",，
textAlign:textAlign.center，
),
)
],
),
),
);
}
}

立即查看：

鉴于此，我需要：

请更改此代码（紫色容器）

到

---

或您可以在容器中添加填充物并删除大小

width: 120,
height: 120,

width : MediaQuery.of(context).size.width * 0.3,
height : MediaQuery.of(context).size.width * 0.3,