一尘不染

Flutter是否支持负边距?

flutter

通常不需要负边距,但在某些情况下它确实很有用。

现在,当我将容器的边距设置为负值时,出现以下错误:

I/flutter ( 3173): 'package:flutter/src/widgets/container.dart': Failed assertion: line 251: 'margin == null ||
I/flutter ( 3173): margin.isNonNegative': is not true.

阅读 2075

收藏
2020-08-13

共1个答案

一尘不染

要回答这个问题,您首先必须定义什么是“负边距”,或者一般说来是真正的“边距”。在CSS中,页边距在各种布局模型中具有各种含义,最常见的是,它们是有助于计算块布局模型用于放置后续子项的偏移量的几个值之一;在这种情况下,负的总边距仅表示下一个子项位于前一个子项的底部上方而不是其后。

在Flutter中,就像在CSS中一样,有多种布局模型。但是,当前没有与CSS块布局模型等效的小部件(它支持边距折叠,负边距,跳过浮点等)。这样的布局模型当然可以实现,但尚未实现,至少不是在框架本身中。

要实现这样的布局模型,您将创建一个类似于RenderFlex或RenderListBody的RenderBox子代,可能提供一种使用ParentDataWidget设置每个子代的边距的方式,就像使用Flex子代可以flex使用Expanded小部件对其进行配置一样。

像这样设计新的布局模型时,最复杂的部分可能是决定当子项太大或太小而无法适应传递给此新布局渲染对象的约束时,如何处理上溢或下溢。如果子项下溢,则RenderFlex渲染对象可以分配空间,如果子项下溢,则认为这是错误(在调试模式下,这由黄色和黑色条纹警告区域以及一条记录到控制台的消息来表示)
; 另一方面,RenderListBody渲染对象认为约束 必须 在主轴上不受限制,这意味着您基本上只能在列表内使用此布局模型(因此命名)。

如果编写新的布局模型不吸引人,则可以使用允许子项重叠的现有布局小部件之一。堆叠是显而易见的选择,您可以在其中设置每个子项的显式位置,并且它们可以任意重叠(这与CSS绝对位置布局模型相似)。另一个选项是CustomMultiChildLayout小部件,它使您可以依次布局和放置每个子级。这样,您可以将每个子项一个接一个地定位,通过将后一个子项的位置设置为一个值来模拟负边距,该值是从前一个子项的大小和位置得出的,但随后一个子项的顶部在前一个子项的上方孩子的屁股。

如果对类似块的布局模型感兴趣,我们当然可以实现(请提交错误并描述您想要实现的模型,或者自己实现并发送拉取请求进行审查)。不过,到目前为止,我们还没有发现它在实践中是否有用,至少不足以证明其复杂性。

2020-08-13