flutter - Flutter，阴影裁剪系统如何工作？

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 本身的设计缺陷？

标签： flutterflutter-layout

Answer 1

我在 Flutter 的 issue 中遇到了这个问题。

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

据我所知，默认 ClipBehaviour与 internalContainer Row Column不同。ListViewOverflow

所以我们通过添加clipBehaviour: Clip.none到 ListView 有一个解决方法。