当我的 item 的数量为 1 、2的时候,阴影正常显示,当我的 item增加到需要滑动的时候,阴影的左右两边无法展示了
import 'package:flutter/material.dart';
class IconWidget extends StatelessWidget {
final String imagePath;
final String text;
const IconWidget({
required this.imagePath,
required this.text,
});
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset(imagePath),
SizedBox(height: 8.0),
Text(text),
],
);
}
}
class ItemWidget extends StatefulWidget {
final bool isSelected;
final Function() onPressed;
const ItemWidget({
required this.isSelected,
required this.onPressed,
});
@override
_ItemWidgetState createState() => _ItemWidgetState();
}
class _ItemWidgetState extends State<ItemWidget> {
Color _backgroundColor = Colors.white;
List<BoxShadow> _boxShadows = [];
@override
Widget build(BuildContext context) {
if (widget.isSelected) {
_backgroundColor = Colors.white;
_boxShadows = [
BoxShadow(
color: Color.fromRGBO(169, 0, 255, 0.16),
offset: Offset(0, 4),
blurRadius: 8,
spreadRadius: 1,
),
];
} else {
_backgroundColor = Colors.white;
_boxShadows = [];
}
return GestureDetector(
onTap: widget.onPressed,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(4.0),
color: _backgroundColor,
boxShadow: _boxShadows,
),
child: Padding(
padding: EdgeInsets.all(10.0),
child: IconWidget(
imagePath: 'path_to_image', // 图像路径
text: 'Text',
),
),
),
);
}
}
class ListViewExample extends StatefulWidget {
@override
_ListViewExampleState createState() => _ListViewExampleState();
}
class _ListViewExampleState extends State<ListViewExample> {
int _selectedIndex = 0;
@override
Widget build(BuildContext context) {
return ListView.separated(
itemCount: 6,
separatorBuilder: (BuildContext context, int index) {
return SizedBox(height: 10.0);
},
itemBuilder: (BuildContext context, int index) {
return ItemWidget(
isSelected: _selectedIndex == index,
onPressed: () {
setState(() {
_selectedIndex = index;
});
},
);
},
);
}
}
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('ListView Example'),
),
body: ListViewExample(),
),
));
}
解决方案:
当ListView的item增加到需要滑动的程度时,阴影的左右两边无法展示的原因可能是ListView的宽度不足以容纳带有阴影的item。
为了解决这个问题,可以尝试使用一个更大的容器来包裹ListView,以便为阴影留出足够的空间。同时,你还需要确保ListView的父级容器可以滚动,以便显示整个ListView的内容。
解决方案
1、将ListView放在一个Expanded小部件中,并将其包裹在SingleChildScrollView中,以便提供滚动功能并确保阴影能够完全显示,使用Expanded小部件将ListViewExample放在一个可以扩展的容器中,并将其包裹在SingleChildScrollView中。在ListView.separated的外部添加了顶部和底部的间距,以便为阴影提供足够的空间,并确保阴影的左右两边都能完全显示出来。
2、最简单的办法
child: Container( margin: EdgeInsets.symmetric(horizontal: 4),