如何将行内的容器拉伸到最大可用高度?

2024-01-10

我有一个 Row 小部件,其中有许多容器,其高度取决于其内容。我希望它们的高度相同。如何在不硬编码其值的情况下实现这一目标?

This is something I have. enter image description here

但我希望第一张卡自动获取行的高度。这样两张卡的高度就相同。我怎样才能实现这个目标?

这是卡容器的代码:

Widget build(BuildContext context) {
    final statusMap = statusOptionView();
    return Container(
      width: 200,
      margin: EdgeInsets.only(right: 20.0),
      child: Stack(
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(
                left: 20.0, right: 20.0, top: 20.0, bottom: 50.0),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(20.0)),
              color: Color(0xFFF97F8B),
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Icon(
                      Icons.access_time,
                      color: Colors.white,
                    ),
                    SizedBox(width: 4.0),
                    Text(
                      event.startTime,
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    )
                  ],
                ),
                SizedBox(
                  height: 20.0,
                ),
                Text(
                  event.title,
                  style: TextStyle(
                    fontWeight: FontWeight.w600,
                    fontSize: 20.0,
                    color: Colors.white,
                  ),
                  maxLines: 2,
                ),
                SizedBox(
                  height: 20.0,
                ),
                Row(
                  children: <Widget>[
                    Icon(
                      Icons.location_on,
                      color: Colors.white,
                    ),
                    SizedBox(
                      width: 4.0,
                    ),
                    Expanded(
                      child: Text(
                        event.venue,
                        style: TextStyle(
                          color: Colors.white,
                        ),
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                      ),
                    )
                  ],
                ),
              ],
            ),
          ),
          Positioned(
            bottom: 0.0,
            right: 0.0,
            left: 0.0,
            child: GestureDetector(
              onTap: () => Navigator.push(context, MaterialPageRoute(
                  builder: (BuildContext context) => EventDetailsScreen(event: event, status: status))),
              child: Container(
                padding: EdgeInsets.symmetric(vertical: 8.0),
                decoration: BoxDecoration(
                    color: Colors.purple,
                    borderRadius: BorderRadius.circular(30.0)),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Icon(
                      statusMap['icon'],
                      color: Colors.white,
                      size: 16.0,
                    ),
                    SizedBox(
                      width: 10.0,
                    ),
                    Text(
                      statusMap['value'],
                      style: TextStyle(
                        color: Colors.white,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          )
        ],
      ),
    );

当它包装在 Row 小部件内时,就像这样:

Row(
  children: <Widget>[...events.map((event) => EventCard(event: event)).toList()],
)

Use IntrinsicHeight作为父母Row其中包含Card

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将行内的容器拉伸到最大可用高度? 的相关文章