时间戳

首页 > 解决方案 > 具有多列和常量宽度/高度卡的列表视图

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

问题描述

我在制作带有 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,
              ),
            )
          ],
        ),
      ),
    );
  }
}

现在查看：

大设备 小型设备

查看，我需要：

需要什么

标签： flutterdartflutter-layout

解决方案

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

width: 120,
height: 120,

至

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

或者您可以在容器中添加填充并删除尺寸

推荐阅读