当我在 ListView 内创建一个带有框阴影的容器(水平滚动)时,阴影看起来很好,但是,当我在 ListView 内添加多个容器时,它们的阴影(只是阴影,而不是容器)在顶部和底部被裁剪。
另请注意,整个 ListView 包装在父容器下。
我尝试增加父容器的高度(整个 ListView 被包裹在其中),但它增加了子容器的高度,其阴影仍然被裁剪。
我还尝试为父容器提供填充,但它的阴影仍然被裁剪。
也许我需要将 ListView 包装在任何其他 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 会从顶部和底部被裁剪。