Question

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

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

Screenshot of my screen

screenshot of what I actually want to do

下面是我的代码。

 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);
      })),
);

Answer 1

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

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的{{1}}设置为mainAxisAlignment，以便在垂直方向上有更多可用空间时，其子项可以平均占用该空间。

spaceEvenly

Answer 2

我看不到ScreenShot，但是从代码中我建议您用Expanded包装第二列，然后用SingleChildScrollView包装第一列，这样就赢了不会溢出，如果里面的容器更高，您可以滚动浏览

Answer 3

我想您的网格项目的尺寸是固定的。因此，如果网格的高度不够，它将溢出。

我为您提供两个想法：

使用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,
  ),
)

增加网格的高度。

Answer 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)
                ],
              ),
            )
          ],
        ),
      ],
    ),
  ),
);

Answer 5

尝试使用灵活的小部件包装溢出的小部件。灵活小部件的子级将填充主轴上的可用空间。

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

5 个答案: