具有多列和常量宽度/高度卡的列表视图答案

【问题标题】：Listview with multiple columns and const width/height cards in it具有多列和常量宽度/高度卡的列表视图
【发布时间】：2020-10-02 10:01:20
【问题描述】：

我在制作带有 2 列的可滚动列表视图时遇到了问题（完美的是 flex 列数取决于屏幕宽度），带有垂直滚动。此列表中将包含具有 const 高度和宽度的卡片。

我已经尝试使用 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,
              ),
            )
          ],
        ),
      ),
    );
  }
}

立即查看：

查看，我需要：

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

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

width: 120,
height: 120,

到

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

或者您可以为容器添加填充并移除尺寸

【讨论】：