需要管理列高并将变量作为小部件传递属性

Question

这是我的卡片小部件代码。这将作为 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),
              )
            ],
          ),
        ),
      ),
    );
  }
}

外观：

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

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

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

Answer 1

你可以试试给容器增加高度属性

class _CardHomeState extends State<CardHome> {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100 // for example 100

Answer 2

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

"Column" 小部件自动覆盖任何和所有高度限制到无穷大。所以你需要手动设置Column中每个子widgets的约束。

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

它并不总是完美的，但确实有效。此外，如果您需要其中的内容可以自动调整大小，您始终可以将它们包装在扩展小部件中。

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

需要管理列高并将变量作为小部件传递属性

Need to manage the column height and pass variables as widget property

flutter

flutter-widget

需要管理列高并将变量作为小部件传递 属性

Need to manage the column height and pass variables as widget property

flutter

flutter-widget

需要管理列高并将变量作为小部件传递属性