我只是想在Flutter中创建带有一些BoxShadows的水平ListView,以重新创建“新同构”效果。
然后我意识到ListView项目上的阴影在边缘被裁剪。我已经尝试过调整各种不同的填充和边距,但是问题仍然存在。
奇怪的是:无法加载作为图像资产的卡会使Shadow完全正常。
class _DrinkListState extends State<DrinkList> {
@override
Widget build(BuildContext context) {
return Container(
child: ListView.builder(
padding: EdgeInsets.all(30),
physics: AlwaysScrollableScrollPhysics(),
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: this.widget.availableDrinks.length,
itemBuilder: (BuildContext context, int index) => Container(
child: Center(
child: LimitedBox(
child: Column(
children: <Widget>[
Expanded(
flex: 4,
child: Container(
child: Center(
child: Container(
child: Image.asset("assets/" +
this
.widget
.availableDrinks[index]
.imageName),
),
),
),
),
Expanded(
flex: 1,
child:
Text(this.widget.availableDrinks[index].label))
],
),
)),
margin: EdgeInsets.symmetric(horizontal: 20),
decoration: neodec,
padding: EdgeInsets.all(20),
width: 200,
)),
height: 300);
}
}
我的BoxDecoration:
BoxDecoration neodec = BoxDecoration(
color: Color.fromRGBO(246, 246, 246, 1),
boxShadow: [
BoxShadow(color: Colors.black12, offset: Offset(10, 10), blurRadius: 10),
BoxShadow(color: Colors.white, offset: Offset(-10, -10), blurRadius: 10)
],
borderRadius: BorderRadius.all(Radius.circular(20)));
答案 0 :(得分:1)
我终于设法通过在我的WidgetBuilder / Container中使用Card而不是Center窗口小部件来解决此问题。