0

这是我的卡片小部件代码。这将作为 ListView.builder 小部件的子项

class CardHome extends StatefulWidget {
  String cardHead;
  String cardDesc;
  String cardTime;
  String cardDate;

  CardHome(
      {this.cardHead, this.cardDesc, this.cardTime, this.cardDate});

  @override
  _CardHomeState createState() => _CardHomeState();
}

class _CardHomeState extends State<CardHome> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.fromLTRB(globals.blockSizeHorizontal * 6,
          globals.blockSizeVertical * 3, globals.blockSizeHorizontal * 6, 0),
      width: globals.blockSizeHorizontal * 87,
      child: Card(
        shape: RoundedRectangleBorder(
            borderRadius:
                BorderRadius.circular(SizeConfig.blockSizeHorizontal * 4.5)),
        color: Color(globals.secColor),
        elevation: 0,
        child: Container(
          padding: EdgeInsets.symmetric(
              vertical: globals.blockSizeVertical * 2.7,
              horizontal: globals.blockSizeHorizontal * 6.5),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Container(
                    width: globals.blockSizeHorizontal * 56,
                    child: Text(
                      'Buy Plane Tickets',
                      overflow: TextOverflow.ellipsis,
                      maxLines: 2,
                      style: TextStyle(
                          height: globals.blockSizeVertical * 0.14,
                          fontFamily: 'Gilroy',
                          fontWeight: FontWeight.bold,
                          fontSize: globals.blockSizeHorizontal * 3.5,
                          letterSpacing: globals.blockSizeHorizontal * 0.1,
                          color: Color(0xff171b20)),
                    ),
                  ),
                  Text(
                    '8:20',
                    style: TextStyle(
                        fontFamily: 'Arboria',
                        fontWeight: FontWeight.w400,
                        fontSize: globals.blockSizeHorizontal * 3.8,
                        color: globals.inactHeadTextColor),
                  ),
                ],
              ),
              SizedBox(
                height: globals.blockSizeVertical * 2,
              ),
              Container(
                width: globals.blockSizeHorizontal * 70,
                child: Text(
                  'Buy Tickets for departure on 14th May, 2020 at 2:15pm',
                  overflow: TextOverflow.ellipsis,
                  maxLines: 3,
                  style: TextStyle(
                      fontFamily: 'Gilroy',
                      fontWeight: FontWeight.w600,
                      fontSize: globals.blockSizeHorizontal * 3.5,
                      letterSpacing: globals.blockSizeHorizontal * 0.02,
                      color: Color(0xff171b20)),
                ),
              ),
              SizedBox(height: globals.blockSizeVertical * 2),
              Text(
                '23 January',
                style: TextStyle(
                    fontFamily: 'Arboria',
                    fontWeight: FontWeight.w400,
                    fontSize: globals.blockSizeHorizontal * 3.3,
                    color: globals.inactHeadTextColor),
              )
            ],
          ),
        ),
      ),
    );
  }
}

它的外观： 在此处输入图像描述

我的问题是 Column 占据了整个可用高度，如您在图像中看到的（黑暗部分）。我什至尝试使用mainAxisSize: MainAxisSize.min但它没有用。有什么办法可以固定高度，使它看起来像一张合适的卡片？

另外，正如我所说，我需要将此小部件传递给 ListView.builder，因此 cardHead、cardDesc、cardTime、cardDate 变量需要代替我手动输入的字符串（例如，购买飞机票，1 月 23 日等）同时传递小部件。例如，cardHead 用作我可以在 listview 构建器中使用的属性，如下所示：

ListView.builder(
  itemCount: headers.length,
  itemBuilder: (context, index) {
    return CardHome(
      cardHead: Text('${headers.[index]}'),
      cardDesc: Text('${descriptions.[index]}'),
    );
  },
);
4

2 回答 2

0

您可以尝试将高度属性添加到容器

class _CardHomeState extends State<CardHome> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100 // for example 100
于 2020-01-23T17:11:29.510 回答
0

好吧，我自己的项目也遇到过类似的问题（尽管 Rows 将宽度设置为无穷大），我得出的唯一令人满意的结论就是这个。

“列”小部件会自动覆盖任何和所有将高度限制为无穷大的约束。因此，您需要手动设置 Column 内每个子小部件的约束。

Column(
  children: [
    Container(
      height: 50,
      child: [Your First Child Widget in the Column Here],
    )
    Container(
      height: 10,
      child: [Your Second Child Widget in the Column Here],
    ),
  ]
),

它并不总是完美的，但它确实有效。此外，如果您需要其中有一些自动调整大小的东西，您总是可以将它们包装在 Expanded Widget 中。

希望这会有所帮助！（注意：你需要对 Rows 做同样的事情）

于 2020-01-23T17:24:26.570 回答