防止BoxShadow被父剪切

Question

我正在用框阴影构建自己的类似于材料的卡片。我想将其中几个组合成一个PageView，以便我可以在卡之间滑动-每个卡Card应填满整个屏幕宽度。该卡具有BoxShadow作为装饰，插入然而，当Card进入PageView（或任何其它包装插件）时，BoxShadow因为它是由限幅就会消失PageView的边界框。

可以通过将Card换成a 来解决此问题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不要将“泄漏”的内容从边界框中裁剪出来？ 当将窗口小部件放置在堆栈中而没有反弹时，也会发生相同的行为。

Answer 1

您可以使用边距：

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

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

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

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