flutter - 将 Flutter Row 的子项拉伸(stretch)到最大*自然*高度

Question

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

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

是否可以实现这种效果？

Answer 1

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

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

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 以显示差异