如何在 Flutter 的卡片视图中显示垂直项目答案

【问题标题】：How to display vertical items in the card view in Flutter如何在 Flutter 的卡片视图中显示垂直项目
【发布时间】：2020-12-08 08:37:00
【问题描述】：

我正在尝试垂直显示卡片中的项目，但在卡片内容中我遇到了一个问题，即“底部溢出 52 像素”。

在这里，我附上了代码、我的设计截图以及我实际需要的截图。请帮忙！

下面是我的代码。

 Widget buildRowItemsGrid(BuildContext context, int index) {
FlutterMoneyFormatter formatter =
    FlutterMoneyFormatter(amount: items[index].price);

return Container(
  child: Card(
    elevation: 5.0,
    margin: EdgeInsets.all(8.0),
    child: Column(
      children: [
        Container(
          child: Image.network(
              "https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs/118898040/original/870e2763755963f5a300574bbea5977fa8b18460/sell-original-football-and-basketball-teams-jersey.jpg",
              width: 100,
              height: 100,
              fit: BoxFit.fill),
        ),
        Column(
          children: [
            Container(
              child: Text(items[index].title,
                  style: titleTextStyle,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis),
              margin: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                  margin: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
                  child: Text(items[index].subtitle,
                      style: subtitleTextStyle)),
            ),
            Container(
              margin: EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(formatter.output.symbolOnLeft,
                      style: priceTextStyle),
                  Text("ADD TO CART", style: addToCardTextStyle)
                ],
              ),
            )
          ],
        ),
      ],
    ),
  ),
);

网格视图代码

Widget buildGridView() {
return Expanded(
  child: GridView.count(
      crossAxisCount: 2,
      scrollDirection: Axis.vertical,
      physics: PageScrollPhysics(),
      shrinkWrap: true,
      children: List.generate(items.length, (index) {
        return buildRowItemsGrid(context, index);
      })),
);

【问题讨论】：

如果您的数据仅限于此，您可以设置Container的高度
@AR 我也通过将Container 的高度增加到 200 进行了检查，但结果相同
能否请您也添加您的列表视图代码？
请再次检查问题，我已添加网格视图代码

标签： android flutter dart flutter-layout cross-platform

【解决方案1】：

您需要像这样在GridView 中设置一个适当的childAspectRatio。

GridView.count(
        crossAxisCount: 2,
        childAspectRatio: 2/3,     //<-- width/height ratio depending on the child's content. Set accordingly.
        //...
)

编辑：

以上部分将解决溢出问题。除此之外，您可以像这样使 Image 小部件的大小自适应，以便在可用时占用更多空间。

Image.network(
                "https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs/118898040/original/870e2763755963f5a300574bbea5977fa8b18460/sell-original-football-and-basketball-teams-jersey.jpg",
                width: MediaQuery.of(context).size.width / 2.8,
                height: MediaQuery.of(context).size.width / 2.8,
                fit: BoxFit.fill,
              )

您还可以将Column 的mainAxisAlignment 设置为spaceEvenly，这样当有更多垂直空间可用时，它的子级可以均匀地占用空间。

Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      //...
)

【讨论】：

它正在工作，但它在“添加到购物车”文本之后占用了底部的额外空间。
是的，这就是为什么我提到您需要为childAspectRatio 设置一个“适当的”值。 2/3 只是一个示例值。您不一定需要将其精确设置为 2/3。您可以使用该值来为其设置合适的值。喜欢你可以试试 2/2.8、2/2.7 等。
好的，我明白了。如果我把媒体查询放在这里会是什么样子？因为将来文本大小或图像高度会发生任何变化。
@DarshitAnjaria 使用 MediaQuery 为 childAspectRatio 设置 GridView 没有意义。因为它给出了设备的大小和孩子的纵横比需要根据孩子的内容来设置。相反，您可以使用 MediaQuery 设置子级内 Image 小部件的宽度和高度，使其适应屏幕大小。我将编辑答案以包含它。

【解决方案2】：

我看不到ScreenShot，但是从代码中我建议你用Expanded包裹第二列，然后用SingleChildScrollView包裹第一列，这样它就不会溢出，你可以如果里面的包含更高，则滚动浏览

【讨论】：

【解决方案3】：

我猜你的 Grid 项目的大小是固定的。所以如果Grid的高度不够就会溢出。

我有两个想法给你：

使用 auto_size_text https://pub.dev/packages/auto_size_text

Expanded(
  child: AutoSizeText(
   'The text to display',
    style: TextStyle(fontSize: 20),
    maxLines: 2,
    minFontSize: 1,
  ),
)

增加网格的高度。

【讨论】：

【解决方案4】：

它会起作用吗？你在它的父母身上给了它一些固定的高度吗？如果给出删除它，然后试试这个。

Widget buildRowItemsGrid(BuildContext context, int index) {
FlutterMoneyFormatter formatter =
    FlutterMoneyFormatter(amount: items[index].price);

return Container(
  child: Card(
    elevation: 5.0,
    margin: EdgeInsets.all(8.0),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          child: Image.network(
              "https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs/118898040/original/870e2763755963f5a300574bbea5977fa8b18460/sell-original-football-and-basketball-teams-jersey.jpg",
              width: 100,
              height: 100,
              fit: BoxFit.fill),
        ),
        Column(
          children: [
            Container(
              child: Text(items[index].title,
                  style: titleTextStyle,
                  maxLines: 2,
                  overflow: TextOverflow.ellipsis),
              margin: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
            ),
            Align(
              alignment: Alignment.centerLeft,
              child: Container(
                  margin: EdgeInsets.fromLTRB(10.0, 5.0, 10.0, 5.0),
                  child: Text(items[index].subtitle,
                      style: subtitleTextStyle)),
            ),
            Container(
              margin: EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text(formatter.output.symbolOnLeft,
                      style: priceTextStyle),
                  Text("ADD TO CART", style: addToCardTextStyle)
                ],
              ),
            )
          ],
        ),
      ],
    ),
  ),
);

【讨论】：

【解决方案5】：

尝试用一个灵活的小部件包装溢出的小部件。 Flexible 小部件的子小部件将填充主轴中的可用空间。

【讨论】：