将子元素的高度设置为等于Wrap Widget（Flutter）中包含的其他最高元素

Question

我需要框对齐，如下图所示。我使用Wrap Widget将我的物品按两个元素连续包装。但是，正如我所见，Wrap小部件没有crossAxisAlignment的Stretch属性。

我使用另一种方法来构建cardItem，以简化代码，然后将其用于我的四张卡。也许您知道其他一些Widget可以帮助您做到这一点。

有人可以帮我吗。请在下面查看我的代码：

class Transfers extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Transfers'),
      ),
      body: Center(
        child: Wrap(
          spacing: 10,
          runSpacing: 10,
          children: <Widget>[
            _buildTransferItem(
              "assets/images/icon.png",
              "Some Text of this box",
              context,
            ),
            _buildTransferItem(
              "assets/images/icon.png",
              "Text",
              context,
            ),
            _buildTransferItem(
              "assets/images/icon.png",
              "Some Text of this box",
              context,
            ),
            _buildTransferItem(
              "assets/images/icon.png",
              "Some Text of this box",
              context,
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildTransferItem(
      String transferIcon, String transferTitle, BuildContext context) {
    return Container(
      width: MediaQuery.of(context).size.width * 0.5 - 20,
      height: ,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12.0),
        boxShadow: [
          BoxShadow(
            color: Color.fromRGBO(140, 140, 140, 0.5),
            blurRadius: 6.0,
          )
        ],
      ),
      padding: EdgeInsets.symmetric(
        vertical: screenAwareSize(20.0, context),
        horizontal: screenAwareSize(20.0, context),
      ),
      child: Column(
        children: <Widget>[
          Image.asset(
            transferIcon,
            width: screenAwareSize(72.0, context),
            height: screenAwareSize(39.0, context),
          ),
          SizedBox(height: screenAwareSize(7.0, context)),
          Text(
            transferTitle,
            style: TextStyle(
              fontSize: screenAwareSize(14, context),
              fontWeight: FontWeight.w300,
            ),
            textAlign: TextAlign.center,
          )
        ],
      ),
    );
  }
}

Answer 1

你需要的是InstrinsicHeight小部件。下面是一个示例，说明如何针对任意给定数量的行中的卡片解决问题。如您所见，该_generateRows(List<String> labels, int numPerRow)函数获取卡片标签的集合和一行中的卡片数量作为输入参数并生成布局：

  List<Widget> _generateRows(List<String> labels, int numPerRow) {
    Widget _buildTransferItem(String transferTitle, int numPerRow) {
      return Builder(
        builder: (context) {
          return Container(
            width: MediaQuery.of(context).size.width / numPerRow - 20,
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(12.0),
              boxShadow: [
                BoxShadow(
                  color: Color.fromRGBO(140, 140, 140, 0.5),
                  blurRadius: 6.0,
                )
              ],
            ),
            padding: EdgeInsets.symmetric(
              vertical: 20,
              horizontal: 20,
            ),
            child: Column(
              children: <Widget>[
                Icon(
                  Icons.info,
                  size: 48,
                ),
                SizedBox(height: 7),
                Text(
                  transferTitle,
                  style: TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.w300,
                  ),
                  textAlign: TextAlign.center,
                )
              ],
            ),
          );
        },
      );
    }

    List<Widget> result = [];
    while (labels.length > 0) {
      List<String> tuple = labels.take(numPerRow).toList();
      for(int i = 0; i< tuple.length; i++){
        if (labels.length > 0) labels.removeAt(0);
      }
      Widget item = IntrinsicHeight(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: tuple.map((s) => _buildTransferItem(s, numPerRow)).toList(),
        ),
      );
      result.add(item);
    }
    return result
        .expand((item) => [
              item,
              SizedBox(
                height: 20,
              ),
            ])
        .toList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Transfers'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: _generateRows(
            ["Some text of this box", "Text", "Some Text of this box", "Some Rather Long Text of this box", "Cool, yeah?", "Last"],
            3,
          ),
        ),
      ),
    );
  }

该IntrinsicHeight部件考虑到孩子这对于大多数容器控件像行等将是确定的数字的考虑内在维度。但是在复杂的情况下它具有 O(N^2) 的性能保证，正如您在 API 文档中所读到的那样。以下是每行卡片数量为 2 和 3 的情况的屏幕截图。请注意，此参数仅传递一次且未在任何地方进行硬编码。

如果有奇数个项目，它会将最后一个项目居中：

Answer 2

使用媒体查询应用容器宽度的方式。您可以以同样的方式申请身高，或者您可以编写手册，例如

高度：300.0，

为了匹配列的父级，您可以编写以下代码：

 Column(
mainAxisSize: MainAxisSize.max, // match parent
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <widget>[
  // your widget
]