如何使所有容器在一列中具有均匀的高度



我有一个案例,我有一些容器应该有相同的高度。但由于每个容器都有不同的文本,因此高度取决于该文本。如何动态地将这些容器的高度设置为最高高度。所以它应该知道哪个小部件的高度最高。

有没有我可以使用的小部件或任何方法?

这里有一些代码,我有:

Column(
children: <Widget>[
Flexible(
child: Container(
color: Colors.amber[600],
child: Text(
'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
),
),
),
Flexible(
child: Container(
color: Colors.pink[600],
child: Text(
'Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
),
),
),
],
),

Wrap小部件可能适用于您的用例。

找到最高的容器并将其高度设置为其他容器是灾难性的

当你的一个容器有很长的文本并在手机上查看时会发生什么?所有的容器都会变得很大,以至于空的空间比文本多。

通常在这种情况下,我们会为容器设置默认高度,例如:50,并在较大的文本上省略号。

Column(
children: <Widget>[
Container(
height: 60,
color: Colors.amber[600],
child: Text(
'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
overflow: TextOverflow.ellipsis,
maxLines: 3,
),
),
Container(
height: 60,
color: Colors.pink[600],
child: Text(
'Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
overflow: TextOverflow.ellipsis,
maxLines: 3,
),
),
],
),

经过几个小时的探索,这是我的方法:

IntrinsicHeight(
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Container(
color: Colors.amber[600],
child: Text(
'Lorem Ipsum is simply dummy text of the printing and typesetting industry.',
),
),
),
Expanded(
child: Container(
color: Colors.pink[600],
child: Text(
'Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.',
),
),
),
],
),
),

我需要添加IntrinsicHeight,然后添加Column作为子项。还需要将mainAxisSize设置为mainAxisSize.max

最新更新