Question

我对Flutter中的剪辑系统如何工作感到困惑。

因此，我将从这个示例开始，“阴影的非”已被裁剪。

即使阴影从其自身或父容器溢出。

Container(
  child: Column(
    children: [
      Text("test"),
      Container(
        margin: paddingTheme.edgeInsets,
        child: Row(
          children: [
            ShadowBox(),
            ShadowBox(),
            ShadowBox(),
          ],
        ),
      ),
    ],
  ),
)

现在，如果我添加更多ShadowBox()直到溢出，所有阴影都会被剪裁。

例如：

Container(
  child: Column(
    children: [
      Text("test"),
      Container(
        margin: paddingTheme.edgeInsets,
        child: Row(
          children: [
            ShadowBox(),
            ShadowBox(),
            ShadowBox(),
            ShadowBox(), // ADD THIS
          ],
        ),
      ),
    ],
  ),
)

现在，即使我将Row更改为SingleChildScrollView或List，它仍然会被裁剪，但不会溢出

Container(
  child: Column(
    children: [
      Text("test"),
      Container(
        margin: paddingTheme.edgeInsets,
        child: ListView.builder( // CHANGE FROM ROW TO LIST
          scrollDirection: Axis.horizontal,
          itemCount: 5,
          itemBuilder: (c, i) => ShadowBox(),
        ),
      ),
    ],
  ),
)

所以问题是它是如何工作的，如何防止这些阴影被修剪？

还是Flutter本身的设计缺陷？

Answer 1

编辑：要获得重叠的阴影且不修剪，可以尝试：

在ShadowBox()小部件中，

Container(
       height: 100,
       width: 100,
       margin: EdgeInsets.only(top: 20,bottom: 20), <-----
       decoration:BoxDecoration(
            color: Colors.white,
            boxShadow: [BoxShadow(color: Colors.blue,blurRadius: 12)]
       ),
),

关于它为什么被剪裁？

在Flutter引擎中，修剪阴影是默认行为。

如果深入研究代码，您会发现在ListView或任何小部件中渲染子级时未考虑阴影的宽度/高度。因此，您必须照顾好它。

为什么它不剪切行/列？

在“行”和“列”中，看不到任何裁剪，因为它假定“行/列”的高度与父对象的最大高度/宽度相同。因此它的高度/宽度为最大/无限。

因此，如果您增加ListView()的父Container()小部件的宽度和高度，则裁剪也不会发生。

Answer 2

在Flutter的问题中，我对此表示怀疑。

https://github.com/flutter/flutter/issues/67858

据我了解，Container Row Column的默认ClipBehaviour与ListView和内部Overflow不同。

因此，我们有一种解决方法，将clipBehaviour: Clip.none添加到ListView。

颤振，阴影裁剪系统如何工作？

2 个答案: