flutter 踩坑记录：ListView 的 item 增加到需要滑动的时候，点击item 的自定义阴影效果消失

当我的 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),