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

编程问答 2022-08-16

问题描述

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

解决方法

您需要像这样在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
,

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

,

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

我为您提供两个想法：

  1. 使用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,),)
  1. 增加网格的高度。
,

行得通吗？你给它的父母定高了吗？如果提供，则将其删除，然后尝试执行此操作。

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,width: 100,height: 100,fit: BoxFit.fill),Column(
          children: [
            Container(
              child: Text(items[index].title,style: titleTextStyle,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,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)
                ],)
          ],],);
,

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

androidandroidcross-platformdartflutter-layout