嵌套的 PageView 会导致阴影被剪裁。如何避免阴影被剪裁？

Question

我有一个简单的嵌套 PageView :

class PackViewVertical extends Stateless {
@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView.builder(
          scrollDirection: Axis.vertical,
          controller: PageController(initialPage: 0, viewportFraction: 0.63),
          itemCount: 5,
          itemBuilder: (_, index) {
            return PageView.builder(
                controller:
                    PageController(initialPage: 0, viewportFraction: 0.63),
                itemCount: sampleCard.length,
                itemBuilder: (context, ind) {
                  return sampleCard[ind];
                });
          }),
    );
  }
}
List sampleCard = [
  Container(
    margin: EdgeInsets.all(50.0),
    decoration: BoxDecoration(
      boxShadow: [
        BoxShadow(
            color: Colors.redAccent, offset: Offset(0, 10), blurRadius: 150.0),
      ],
      color: Colors.red,
    ),
  ),
  Container(
    margin: EdgeInsets.all(50.0),
    decoration: BoxDecoration(
      boxShadow: [
        BoxShadow(
            color: Colors.blueGrey, offset: Offset(0, 10), blurRadius: 150.0),
      ],
      color: Colors.blueGrey,
    ),
  ),
  Container(
    margin: EdgeInsets.all(50.0),
    decoration: BoxDecoration(
      boxShadow: [
        BoxShadow(
            color: Colors.yellow, offset: Offset(0, 10), blurRadius: 150.0),
      ],
      color: Colors.yellow,
    ),
  ),
];

这是结果：There is no boundary between the cards in horizontal view inner PageView But there is boundary in the vertical PageView which you can see it like a line when I add shadow.

我的问题是：如何删除该边界（也从垂直视图中）以获得统一的背景？像这样的东西：(I want the shadows to be uniform (like blended and reached to the next color) in the vertical view similar to horizontal view)

Answer 1

发生这种情况是因为您的 Container 阴影被它们的 PageView parents 剪切了。

您可以在 PageView.clipBehavior 属性的帮助下将其设置为 Clip.none 来避免阴影剪切。

将此添加到您 PageView 的，

clipBehavior: Clip.none

嵌套的 PageView 会导致阴影被剪裁。如何避免阴影被剪裁？

Nested PageView causes shadows to clip. How to avoid the shadow from getting clipped?

flutter

flutter-layout

shadow

flutter-pageview