我需要如下图所示的框对齐。我使用 Wrap Widget 将我的项目连续包装两个元素。但正如我所见，Wrap 小部件没有 crossAxisAlignment 的拉伸(stretch)属性。

我使用另一种方法来构建 cardItem，以简化我的代码，并将其重新用于我的四张卡片。 也许你知道一些其他的小部件来帮助做到这一点。

谁能帮帮我。请参阅下面的代码:

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

最佳答案

你需要的是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小部件考虑了 child 的内在尺寸，对于大多数容器小部件(如 Row 等)来说，这些尺寸将是确定的数字。但它在复杂情况下提供 O(N^2) 的性能保证，您可以在 API 文档中阅读。 以下是每行卡片数量为 2 和 3 的情况的屏幕截图。请注意，此参数仅传递一次，并且不会在任何地方硬编码。

如果项目数为奇数，则将最后一个项目居中:

关于flutter - 设置子元素的高度等于 Wrap Widget (Flutter) 包含的其他最高元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56806117/