将 Flutter Row 的子项拉伸到最大*自然*高度答案

【问题标题】：Stretch children of a Flutter Row to the maximum *natural* height将 Flutter Row 的子项拉伸到最大*自然*高度
【发布时间】：2020-02-18 20:19:01
【问题描述】：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(title),
    ),
    body: ListView(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.end,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              alignment: AlignmentDirectional.center,
              color: Colors.red,
              child: Text('Lorem ipsum dolor sit amet'),
              width: 150,
            ),
            Container(
              color: Colors.blue,
              width: 4,
              height: 8,
            ),
            Container(
              width: 12,
            ),
            Container(
              color: Colors.blue,
              width: 4,
              height: 8,
            ),
            Container(
              width: 12,
            ),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.end,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Container(
              alignment: AlignmentDirectional.center,
              color: Colors.red,
              child: Text('Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet'),
              width: 150,
            ),
            Container(
              color: Colors.blue,
              width: 4,
              height: 8,
            ),
            Container(
              width: 12,
            ),
            Container(
              color: Colors.blue,
              width: 4,
              height: 8,
            ),
            Container(
              width: 12,
            ),
            Container(
              color: Colors.blue,
              width: 4,
              height: 8,
            ),
            Container(
              width: 12,
            ),
          ],
        ),
      ],
    ),
  );
}

蓝色的小容器是用来模拟列的。为了完美匹配，我需要它们将自己拉伸到最左边 Container 的高度（带有 Text 标签）。我曾尝试使用 BoxConstraints 来实现这一点，但由于高度无限，它们会导致渲染失败。设置固定高度是不可行的，因为文本可能会发生变化；我确实可以设置最大高度。

有没有可能达到这个效果？

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

你可以使用https://api.flutter.dev/flutter/widgets/IntrinsicHeight-class.html

并设置交叉对齐以在行中拉伸

ListView(
        children: <Widget>[
          IntrinsicHeight(// <---------- this one here
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.stretch, // <---------- set to stretch
              mainAxisAlignment: MainAxisAlignment.end,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Container(
                  alignment: AlignmentDirectional.center,
                  color: Colors.red,
                  child: Text('Lorem ipsum dolor sit amet'),
                  width: 150,
                ),
                Container(
                  color: Colors.blue,
                  width: 4,
                  height: 8,
                ),
                Container(
                  width: 12,
                ),
                Container(
                  color: Colors.blue,
                  width: 4,
                  height: 8,
                ),
                Container(
                  width: 12,
                ),
              ],
            ),
          ),// end here
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Container(
                alignment: AlignmentDirectional.center,
                color: Colors.red,
                child: Text('Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet'),
                width: 150,
              ),
              Container(
                color: Colors.blue,
                width: 4,
                height: 8,
              ),
              Container(
                width: 12,
              ),
              Container(
                color: Colors.blue,
                width: 4,
                height: 8,
              ),
              Container(
                width: 12,
              ),
              Container(
                color: Colors.blue,
                width: 4,
                height: 8,
              ),
              Container(
                width: 12,
              ),
            ],
          ),
        ],
      )

我故意跳过了第二个Row 以显示差异

【讨论】：