如何将 Row 内的容器拉伸到最大可用高度？答案

【问题标题】：How to stretch Containers inside Row to maximum available height?如何将 Row 内的容器拉伸到最大可用高度？
【发布时间】：2020-12-10 16:08:25
【问题描述】：

我有一个 Row 小部件，它有许多不同高度的容器，具体取决于它们的内容。我希望它们的高度相同。在不硬编码它们的值的情况下如何实现这一点？

这是我拥有的东西。

但我希望第一张卡片自动获取行高。这样两张卡的高度相同。我怎样才能做到这一点？

这是卡片容器的代码：

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

【问题讨论】：

提供您的代码。
代码已提供。
在 Row 小部件中尝试 crossAxisAlignment: CrossAxisAlignment.stretch
@ArshShaikh 失败并出现错误：BoxConstraints 强制无限高度。
然后用 Expanded 小部件包装你的 Row

标签： flutter dart flutter-layout

【解决方案1】：

使用IntrinsicHeight 作为包含Card 的Row 的父级

【讨论】：

【解决方案2】：

行( mainAxisAlignment : MainAxisAlignment.spaceEvenly, .....)

或尝试用扩展包装每个小部件。

希望它有效

【讨论】：

不。还是行不通。你能写出你的完整代码吗？

【解决方案3】：

您可以使用CrossAxisAlignment.stretch 使行/列的所有子项使用相同的高度/宽度。

  /// Require the children to fill the cross axis.  
  ///  
  /// This causes the constraints passed to the children to be tight in the  
  /// cross axis.  
  stretch,

查看https://codepen.io/kuhnroyal/pen/wvGormg

【讨论】：

我已经尝试过了，但是在使用拉伸时出现错误。请您重写您的代码，以便我理解吗？
没有什么可重写的，示例很基础。如果你不明白，你应该阅读一些关于如何使用列和行的教程。如果你得到一个错误，那么你正在做一些不同的事情，你可以在示例中看到它做了你想要的。您遇到什么错误？

【解决方案4】：

在您的情况下，行是列的子级，列为其子级提供完整的可用高度，因此行作为列的子级，采用完整的可用高度，以便告诉列只提供所需的其孩子的高度尝试将 MainAxisSize.min 属性赋予列。我不确定它是否有效，但您可以尝试。

【讨论】：

没有。这对我也没有帮助。您可以尝试重写您的代码并将其发布在您的答案中吗？