我正在用盒子阴影构建我自己的类似 Material 的卡片。我想将其中的几个组合在一个 PageView
中,以便我可以在卡片之间刷卡 - 每张 Card
应该填满屏幕的整个宽度。
卡片上有 BoxShadow
作为装饰,但是在插入 Card
时进PageView
(或任何其他包装小部件),BoxShadow
会消失,因为它被 PageView
剪掉了的边界框。
这可以通过包装 Card
来解决。成Padding
,但这不是我想要的,因为我更喜欢最外面的小部件为整个 View 的所有子小部件提供填充 - 这样如果我的填充发生变化,我就不必更改每个小部件。
这是我的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 不要剪掉边界框中“泄漏”的任何东西?
将小部件放置在弹跳之外的堆栈上时会发生相同的行为。
最佳答案
您可以使用边距:
...
Container(
margin: EdgeInsets.all(10),
..
也许您会对 viewportFraction PageController 参数感兴趣:
final PageController controller = PageController(
viewportFraction: 1,
);
...
PageView.builder(
controller: controller,
它缩小了 PageView 中的页面大小,因此最近的页面变得可见。
关于flutter - 防止 BoxShadow 被父级裁剪,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54491895/