@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,
),
],
),
],
),
);
}
蓝色的小容器是用来模拟列的。为了完美匹配,我需要它们将自己拉伸到最左边容器(带有文本标签)的高度。我尝试使用 BoxConstraints 来实现此目的,但由于高度无限,它们会导致渲染失败。设置固定高度是不可行的,因为文本可能会改变;我确实可以设置最大高度。
能达到这样的效果吗?