Question

我需要使框对齐，如下图所示。我使用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,
          )
        ],
      ),
    );
  }
}

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小部件考虑了子级的固有尺寸，对于大多数容器小部件（如Row等），子级的固有尺寸将是确定的数字。但是在复杂的情况下，它具有O（N ^ 2）的性能保证，您可以在API文档中阅读。以下是每行纸牌数为2和3的情况的屏幕截图。请注意，此参数仅传递一次，不会在任何地方进行硬编码。

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

Answer 2

使用媒体查询对Container的宽度进行应用的方式。可以用相同的方法申请身高，也可以编写手册，例如

高度：300.0，

要匹配Column的父级，您可以编写以下代码：

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

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

2 个答案: