防止 BoxShadow 被父级裁剪

Question

我正在构建我自己的 material 类带有框阴影的卡片。我想将其中的几个组合成 PageView，这样我就可以在卡片之间滑动 - 每个 Card 应该填满屏幕的整个宽度。这些卡片有一个 BoxShadow 作为装饰，但是当将 Card 插入 PageView（或任何其他包装小部件）时，BoxShadow 会消失，因为它被PageView 的边界框。

这可以通过将 Card 包装成 Padding 来解决，但这不是我想要的，因为我更喜欢由最外层小部件为整个子小部件提供的填充视图 - 这样即使我的填充发生变化，我也不必更改每个小部件。

这是我的 Card 代码的样子：

class Card extends StatelessWidget {
  final Widget child;
  final EdgeInsetsGeometry padding;

  Card({@required this.child, this.padding});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(color: Colors.white, boxShadow: <BoxShadow>[
        BoxShadow(color: Color.fromRGBO(0, 0, 0, 0.1), blurRadius: 14.0),
        BoxShadow(
            color: Color.fromRGBO(0, 0, 0, 0.1),
            offset: Offset(0, 2),
            blurRadius: 2.0)
      ]),
      child: Padding(
        padding: padding ?? EdgeInsets.all(20),
        child: this.child,
      ),
    );
  }
}

在所描述的裁剪行为中包装其中的几个结果。

有没有办法告诉 Flutter 不要将 "leaking" 的任何内容剪裁出边界框？ 将小部件定位在堆栈上时会发生相同的行为。

Answer 1

您可以使用边距：

...
Container(
  margin: EdgeInsets.all(10), 
..

也许您会对 viewportFraction PageController 参数感兴趣：

final PageController controller = PageController(
  viewportFraction: 1,
);
...
PageView.builder(
  controller: controller,

它缩小了 PageView 中的页面大小，因此最近的页面变得可见。

防止 BoxShadow 被父级裁剪

Prevent BoxShadow from being clipped by parent

flutter

flutter-layout