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

【问题标题】：Nested PageView causes shadows to clip. How to avoid the shadow from getting clipped?嵌套的 PageView 会导致剪切阴影。如何避免阴影被剪裁？
【发布时间】：2021-06-03 11:06:50
【问题描述】：

我有一个简单的嵌套 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)

【问题讨论】：

标签： flutter flutter-layout shadow flutter-pageview

【解决方案1】：

发生这种情况是因为您的Container 阴影被他们的PageView 父母剪掉了。

您可以通过将PageView.clipBehavior 属性设置为Clip.none 来避免阴影剪切。

将此添加到您的PageViews both，

clipBehavior: Clip.none

【讨论】：

非常感谢。它解决了这个问题。 @nisanth
很高兴有帮助:)。请考虑接受答案，以便对其他人有所帮助。