当我在ListView中创建一个带有框阴影的Container（水平滚动）时，阴影看起来很好，但是，当我在ListView中添加多个Container时，它们的阴影（只是阴影，而不是Container）会在顶部和底部被裁剪。
还请注意，整个ListView被 Package 在父容器下。
我试图增加父容器的高度（整个ListView都被包裹在其中），但它增加了子容器的高度，其阴影仍然被裁剪。
我也尝试给予填充父容器，但它仍然阴影仍然得到裁剪。
也许我需要把ListView Package 在任何其他Widget中，这样就可以完成工作而不会出现问题。
Container(
// padding: EdgeInsets.only(left: 30.0, right: 0.0),
height: 140.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
height: 140.0,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset.zero,
blurRadius: 10.0,
spreadRadius: 0.0,
)
],
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child: Image.asset(
'assets/images/leather_boot.png'),
),
Container(
padding:
EdgeInsets.only(top: 30.0, bottom: 30.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'BadAss Genuine',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Leather Boots',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.5,
width: 150.0,
color: Color(0xff643523),
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
Container(
//This is actual custom Card
width: 340.0,
height: 140.0,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset.zero,
blurRadius: 10.0,
spreadRadius: 0.0,
)
],
color: Colors.white,
borderRadius: BorderRadius.circular(10.0),
),
child: Row(
children: <Widget>[
Container(
padding: EdgeInsets.fromLTRB(
30.0, 20.0, 25.0, 20.0),
child: Image.asset(
'assets/images/leather_boot.png'),
),
Container(
padding:
EdgeInsets.only(top: 30.0, bottom: 30.0),
child: Column(
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
Text(
'BadAss Genuine',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 3.0,
),
Text(
'Leather Boots',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w500,
fontSize: 18.0,
),
),
SizedBox(
height: 12.0,
),
Container(
height: 1.5,
width: 150.0,
color: Color(0xff643523),
),
],
),
),
],
),
),
SizedBox(
width: 30.0,
),
],
),
),我希望ListView有容器（作为自定义卡）有适当的BoxShadow，但在实际输出中，容器的BoxShadow从顶部和底部都被裁剪。
3条答案
按热度按时间axr492tv1#
正如@Zahra所写的，
将
clipBehavior: Clip.none,添加到ListView，解决了问题。只有当小部件超过屏幕尺寸时才会进行裁剪
6xfqseft2#
好吧，我自己找到了解决办法。
问题解决步骤
1.创建几个容器（作为一个卡）与一定的宽度和半径10.0的BoxShadow。让我们称之为子容器。
1.创建一个带有水平滚动轴的ListView。将上面创建的子容器放在这个ListView中。
1.现在将ListView Package 在一个新的Container（我们称之为Parent Container）中，以给予ListView一个高度。如果你想让你的子容器的高度为140.0，那么让你的Parent Container的高度为160.0，其中包括顶部和底部的BoxShadow半径10.0（10.0+ 140.0 + 10.0）。
1.现在在顶部和底部都给予10.0的ListView填充。
1.问题解决了（愚蠢的我）。
此处为示例代码
zpjtge223#
在我的例子中，clip Behavior属性有助于显示阴影。然而，这个属性产生了很大的问题：滚动时，ListView元素开始覆盖相邻的小部件。
我认为要解决这个问题，更正确的方法是将列表项（带有阴影的小部件） Package 在具有margin属性的Container中。此属性是为此目的而创建的。将属性的值设置为阴影的大小。