将Flutter Row的子级拉伸到最大自然高度

debugcn 发表于 Dev

艾米斯帕克

@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实现此目的，但是由于高度无限，它们会导致渲染失败。设置一个固定的高度是不可行的，因为文本可能会改变。我可以设置最大高度。

有可能达到这种效果吗？

文件

您可以使用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以显示差异