我正在构建一个小部件看起来像推特的屏幕,我正在尝试用以下代码实现个人资料图片下的竖条:
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
VerticalDivider(
color: Colors.red,
thickness: 10,
width: 20,
),
//make a widget that looks like twitter composing tweet
CircleAvatar(
radius: 20,
backgroundImage: NetworkImage(user.imageUrls[0]),
),
//add a gray line that runs down the middle of the screen
VerticalDivider(
color: Colors.red,
thickness: 10,
width: 200,
),
],
),
),
它看起来像这样:
正如您所看到的,分隔线是不可见的。使用指定的高度环绕分隔线会使其看起来如下所示:
它现在是可见的,但显然扩展到了小部件的原始大小之外。有没有办法将父级的大小传递到VerticalDivider中,这样我就知道它需要使用多少空间了?
谢谢!
1条答案
按热度按时间2uluyalo1#
可以用
IntrinsicHeight
小部件 PackageRow
,它将根据最高的子级设置行高(这里是高度为200的容器)。当然,在您的示例中,在布局之前您不知道最高的子容器的大小,我使用容器只是为了给予您一个示例。IntrinsicHeight
使用起来相对昂贵,但对于此类用例来说是正确的选择(请参见其docs)。