颤动垂直分隔器与其父级一样高

Question

Hi Flutter community：(

在颤振应用程序上工作并寻求有关 UI 小部件的帮助。

我不知道如何根据父母的身高设置孩子的身高。

需要创建一个垂直分隔线(或具有自定义高度的容器(并将其高度设置为其父级的最大值，因为父高度(在我的例子中是一列(将根据内部小部件而变化。

我已经找到了创建垂直分隔线但高度固定的方法。尝试使用BoxFit，BoxConstraint，FittedBox和其他几种方式，但未能设置父级的高度。

分隔符放置在容器>行>列>容器内，分隔符的高度应为列的高度。

如此图像的示例：

https://i.stack.imgur.com/uUWjF.png

附言所有小部件都放置在列表视图中

Column(
children: <Widget>[
Container(
color: Colors.blue,
width: 5.0,
//height: -> setting to maximum of its parent
),
],
),

Answer 1

你可以为此使用 IntrinsicHeight。

在此示例中，我使用容器作为分隔符，因为我需要在分隔线上使用边框半径，但您也可以使用垂直分隔符。

IntrinsicHeight(
child: Row(
children: <Widget>[
// This is your divider
Container(
width: 3,
height: double.infinity,
color: Colors.blue,
margin: const EdgeInsets.only(right: 4),
),
Column(
children: <Widget>[
Text(
'Text 1',
style: TextStyle(fontSize: 20),
),
Text(
'Text 2',
style: TextStyle(fontSize: 20),
),
Text(
'Text 3',
style: TextStyle(fontSize: 20),
),
],
),
],
),
),

这是结果

如果你只需要一个简单的分隔符在侧面，我建议你在容器中添加边框，因为IntrinsicHeight的文档说调用起来很昂贵，所以尽可能避免使用它。

在这里，您可以阅读有关向容器添加边框的更多信息。

编辑：25.08.2022。

Flutter的官方频道视频解释了内在小部件

Answer 2

您可以使用展开的小部件来使用父微件的全高。

Answer 3

你应该首先确定列表中有多少项目 之后你可以使用这个

您可以使用此容器绘制线条

for (var i in yourItem) Dividers(i),
Container Dividers(Map<String, dynamic> changes) {
return Container(
decoration: BoxDecoration(
border: Border(
top: BorderSide(width: 30, color: Colors.blue),
bottom: BorderSide(width: 30, color: Colors.blue),
),
color: Colors.white,
),
margin: EdgeInsets.only(left: 22),
width: 2,
);
}

Answer 4

您可以使用Container，但不指定height容器将展开以填充其父级中的空间constraints。

Container(
child: Divider(
width: 5.0, 
color: Colors.blue,
)
)