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

Question

我试图在卡片中垂直显示项目，但在卡片内容中我遇到了一个问题，即“底部溢出 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);
      })),
);

Answer 1

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

Answer 2

我想您的网格项有固定大小。所以如果Grid的高度不够就会溢出。

我有两个想法给你：

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

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

增加网格的高度。

Answer 3

有用吗？你有没有在它的 parents 中给它一些固定的高度？如果给出删除它，然后尝试这个。

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 4

尝试用灵活的小部件包装溢出的小部件。 Flexible 小部件的子项将填充主轴中可用的 space。

Answer 5

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

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

编辑：

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

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这样它的children就可以在[=30]的时候均匀的占满space =] 垂直可用。

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

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

How to display vertical items in the card view in Flutter

android

cross-platform

dart

flutter

flutter-layout