卡片在颤抖中占据了所有垂直空间

Question

我已经使用Card小部件显示在列表中，但是卡片占据了所有这样的垂直空间。

因此，它会使列表视图变得更糟，并显示类似这样的内容。

我尝试将mainAxisAlignment更改为max和min，但是效果不太好。

这是我为卡写的代码：

Card(
        margin: EdgeInsets.fromLTRB(cardMargin, 0, cardMargin, cardWidth),
        elevation: 5,
        child: Row(mainAxisSize: MainAxisSize.max, children: <Widget>[
          new Container(
              alignment: Alignment.centerLeft,
              height: cardHeight,
              width: cardWidth / 2,
              child: Image(image: AssetImage("assets/demo.jpg"))),
          new Container(
              alignment: Alignment.centerRight,
              height: cardHeight,
              width: cardWidth / 2,
              child: Padding(
                  padding: EdgeInsets.all(8),
                  child: Column(children: <Widget>[
                    Container(
                        height: cardHeight / 2,
                        child: Column(children: <Widget>[
                          Align(
                              alignment: Alignment.centerLeft,
                              child: Text("Chevrolet Camero 2015",
                                  style: TextStyle(
                                      fontSize: 16,
                                      fontWeight: FontWeight.bold))),
                          Align(
                              alignment: Alignment.centerLeft,
                              child: Row(children: <Widget>[
                                Padding(
                                    padding: EdgeInsets.fromLTRB(0, 5, 0, 0),
                                    child: Text("121,000",
                                        style: TextStyle(
                                            color: Colors.lightGreen,
                                            fontSize: 16,
                                            fontWeight: FontWeight.bold))),
                                Row(
                                    mainAxisSize: MainAxisSize.max,
                                    children: <Widget>[
                                      Text("AED",
                                          textAlign: TextAlign.left,
                                          style: TextStyle(
                                              color: Colors.lightGreen,
                                              fontSize: 10))
                                    ])
                              ]))
                        ])),
                    Container(
                        child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: <Widget>[
                          Flexible(
                              flex: 2,
                              child: Column(children: <Widget>[
                                Align(
                                    alignment: Alignment.centerLeft,
                                    child: Text("Lot #",
                                        style: TextStyle(
                                            color: Colors.grey, fontSize: 11))),
                                Align(
                                    alignment: Alignment.centerLeft,
                                    child: Text("123456",
                                        style: TextStyle(
                                            fontSize: 13,
                                            fontWeight: FontWeight.bold)))
                              ])),
                          Flexible(
                              flex: 1,
                              child: Column(children: <Widget>[
                                Align(
                                    alignment: Alignment.centerLeft,
                                    child: Text("Bids",
                                        style: TextStyle(
                                            color: Colors.grey, fontSize: 11))),
                                Align(
                                    alignment: Alignment.centerLeft,
                                    child: Text("37",
                                        style: TextStyle(
                                            fontSize: 13,
                                            fontWeight: FontWeight.bold)))
                              ])),
                          Flexible(
                              flex: 2,
                              child: Column(children: <Widget>[
                                Align(
                                    alignment: Alignment.centerLeft,
                                    child: Text("Time left",
                                        style: TextStyle(
                                            color: Colors.grey, fontSize: 11))),
                                Align(
                                    alignment: Alignment.centerLeft,
                                    child: Text("03:15:32",
                                        style: TextStyle(
                                            fontSize: 13,
                                            fontWeight: FontWeight.bold)))
                              ]))
                        ]))
                  ])))
        ]));

这是主页：

Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
      new Stack(children: <Widget>[
        new CustomAppBar("Cars & Machinery"),
        new Positioned.fill(
            child: Align(
                alignment: Alignment.bottomCenter, child: new AppBarMenu()))
      ]),
      new Padding(
          padding: EdgeInsets.all(10),
          child: Text("Scroll down to Search",
              style: TextStyle(color: Colors.grey, fontSize: 12))),
     // new CarItem()
      new Expanded(
          child: new ListView.builder(
              itemCount: 2,
              shrinkWrap: true,
              itemBuilder: (BuildContext ctxt, int index) {
                return new CarItem();
              }))
    ]);

我希望卡片在列表上正确显示。

Answer 1

我认为问题在于您为Card写的以下行：

margin: EdgeInsets.fromLTRB(cardMargin, 0, cardMargin, cardWidth),

第四个参数代表底部边距，因为您给定了cardWidth的值而不是边距。检查更新值，如下所示：

margin: EdgeInsets.fromLTRB(cardMargin, 0, cardMargin, cardMargin),