使容器小部件在垂直方向上填充父容器

16 浏览
0 Comments

使容器小部件在垂直方向上填充父容器

我需要容器填充垂直空间,以便它可以充当一个ontap监听器。我尝试了大多数解决方案,但似乎都不起作用。

我想要做的是让容器填充垂直空间,同时保持固定宽度。链接中的前两个是我目前的情况,第三个是我想要的效果。我的想法是将容器设置为透明,并添加一个ontap手势监听器。如果有更好的解决方案,请随时提出建议。

我相当确定我可能遗漏了什么,因为我尝试了很多不同的方法,但都没有起作用。我还上传了一个带有调试绘图的图片,链接在这里。

PS.我知道我将高度设置为固定值,但这是显示容器的唯一方式。

0
0 Comments

问题的出现原因是在Flutter中,子widget不能超出其父widget所施加的“布局约束”。在布局阶段,Flutter引擎使用约束求解器将“超出范围”的值自动纠正为其父约束所允许的值。

解决方法是通过将width: double.infinityheight: double.infinity传递给Container,使其填充所有可用空间。使用足够大的值可以确保“填充父级”。

实际上,甚至BoxConstraints.expand()也在内部利用了相同的思想。如果打开expand()的源代码,会看到以下内容:

/// 创建一个扩展以填充另一个box约束的box约束。

///

/// 如果给出了width或height,则约束将在给定维度上要求确切的值。

const BoxConstraints.expand({

double width,

double height,

}) : minWidth = width ?? double.infinity,

maxWidth = width ?? double.infinity,

minHeight = height ?? double.infinity,

maxHeight = height ?? double.infinity;

因此,如果您确定要填充所有空间,可以直观地传递一个大于父级(或大于整个屏幕)的数字,例如double.infinity。更好的做法是使用constraints: BoxConstraints.expand()

感谢您的回答!虽然您的说法基本上是正确的,但在这里没有风险。Flutter引擎使用约束求解器将较大的值强制转换为其父级所允许的值,这是Flutter布局工作原理的最基本原则之一。BoxConstraints.expand()只是利用了相同的事实。我已经更新了我的答案,试图更好地解释它。如果您对这些主题不熟悉,您可能希望了解Flutter引擎如何在内部执行布局。

这是一个好方法。简单易读,易于理解,而且不会在树中添加另一个widget(至少在你看到的代码中)。

感谢解释,谢谢。

0
0 Comments

问题的出现的原因是想要将容器(widget)垂直地填满父容器。但是在尝试使用constraints:BoxConstraints.expand()属性时出现了错误。错误的提示是Error : BoxConstraints forces an infinite width and infinite height.并且发现如果容器的父容器是SingleChildScrollView()时,该方法也不起作用。

解决方法是使用SingleChildScrollView()作为父容器,并将容器的高度设置为double.infinity

最终的代码解决方案如下:

SingleChildScrollView(

child: Container(

color: Colors.green,

child: Text("Flutter"),

constraints: BoxConstraints(

minHeight: double.infinity,

),

),

)

这种方法确保容器的高度可以填满父容器,同时也可以在有滚动需求的情况下正常工作。

0
0 Comments

问题:如何使容器小部件垂直填充父容器?

原因:要实现容器小部件垂直填充父容器,可以结合使用IntrinsicHeight小部件和crossAxisAlignment: CrossAxisAlignment.stretch属性的Row小部件。IntrinsicHeight小部件会强制使Row的子级垂直扩展,但是Row本身只会占用尽可能少的垂直空间。

解决方法:

Card(

child: IntrinsicHeight(

child: Row(

crossAxisAlignment: CrossAxisAlignment.stretch,

children: [

Container(

width: 20.0,

color: Colors.amber,

),

// Expanded(...)

],

),

)

)

注意事项:IntrinsicHeight小部件可能会对性能产生影响,但只有在不需要IntrinsicHeight时才会出现警告。这是IntrinsicHeight的预期用法。

其他解决方法:

- 将Container的高度设置为double.infinity。

- 参考stackoverflow.com上的解决方法。

这些方法可以解决容器小部件垂直填充父容器的问题。

0