如何解决Flutter CarouselSlider中右侧图片覆盖放大中心图的问题

我使用Flutter的CarouselSlider展示图片序列，期望实现中心图片放大突出、左右两侧图片仅显示约一半的效果，但当前遇到右侧图片覆盖放大后中心图的问题，需要解决。

当前实现代码 #

Widget build(BuildContext context) {
    double imageWidth = MediaQuery.of(context).size.width * 0.4;
    return Column(
      children: [
        Container(
          width: MediaQuery.of(context).size.width *
              0.8, // This sets the width of the carousel.
          child: CarouselSlider.builder(
            itemCount: imageList.length,
            itemBuilder: (BuildContext context, int itemIndex, int realIndex) {
              bool isCurrentPage = itemIndex == _currentIndex;
              double scale = isCurrentPage ? 1.5 : 1.0;
              return Center(
                child: Transform.scale(
                  scale: scale,
                  child: Opacity(
                    opacity: 1.0,
                    child: Image.asset(
                      imageList[itemIndex],
                      fit: BoxFit.fill,
                      width: isCurrentPage ? imageWidth * 0.8 : imageWidth,
                      height: 250,
                    ),
                  ),
                ),
              );
            },
            options: CarouselOptions(
              height: MediaQuery.of(context).size.height *
                  (widget.isMobile ? 0.4 : 0.6),
              autoPlay: true,
              enlargeCenterPage: true,
              viewportFraction: 0.333,
              aspectRatio: 16 / 9,
              onPageChanged: (index, reason) {
                setState(() {
                  _currentIndex = index;
                });
              },
            ),
          ),
        ),
        const SizedBox(
          height: 50,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            buildIndicator(_currentIndex - 1),
            buildIndicator(_currentIndex),
            buildIndicator(_currentIndex + 1),
          ],
        ),
      ],
    );
}

效果对比 #

• 当前效果：
• 期望效果：

问题原因 #

自定义的Transform.scale和CarouselOptions中的enlargeCenterPage功能重复，且手动放大的中心图未处理层级关系——CarouselSlider的item按顺序渲染，右侧item的层级高于中心item，导致覆盖。

解决方案 #

1. 移除重复放大逻辑，利用组件原生功能 #

删除itemBuilder中的Transform.scale及相关scale变量，依赖CarouselOptions的enlargeCenterPage实现中心放大，组件内部会自动处理层级，避免覆盖。

2. 调整参数适配需求 #

• 修改viewportFraction为0.5，让两侧图片显示约一半宽度；
• 通过enlargeFactor控制中心图的放大比例（默认0.3，可按需调整）；
• 移除冲突的aspectRatio参数（已设置height，两者不能同时生效）；
• 可去掉外层限制宽度的Container，让CarouselSlider自适应布局。

修改后的代码 #

Widget build(BuildContext context) {
  double imageWidth = MediaQuery.of(context).size.width * 0.4;
  return Column(
    children: [
      CarouselSlider.builder(
        itemCount: imageList.length,
        itemBuilder: (BuildContext context, int itemIndex, int realIndex) {
          return Image.asset(
            imageList[itemIndex],
            fit: BoxFit.fill,
            width: imageWidth,
            height: 250,
          );
        },
        options: CarouselOptions(
          height: MediaQuery.of(context).size.height * (widget.isMobile ? 0.4 : 0.6),
          autoPlay: true,
          enlargeCenterPage: true,
          enlargeFactor: 0.3, // 控制中心图片放大幅度
          viewportFraction: 0.5, // 控制单张图片占视口的比例
          onPageChanged: (index, reason) {
            setState(() {
              _currentIndex = index;
            });
          },
        ),
      ),
      const SizedBox(height: 50),
      Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          buildIndicator(_currentIndex - 1),
          buildIndicator(_currentIndex),
          buildIndicator(_currentIndex + 1),
        ],
      ),
    ],
  );
}

可选：增强层级与视觉效果 #

如果需要更强的层级区分，可在itemBuilder中给当前中心图添加阴影或提升层级：

itemBuilder: (BuildContext context, int itemIndex, int realIndex) {
  bool isCurrent = itemIndex == _currentIndex;
  return Stack(
    children: [
      Image.asset(
        imageList[itemIndex],
        fit: BoxFit.fill,
        width: imageWidth,
        height: 250,
      ),
      if (isCurrent)
        Positioned.fill(
          child: Container(
            decoration: BoxDecoration(
              boxShadow: [
                BoxShadow(
                  color: Colors.black26,
                  blurRadius: 8,
                  offset: const Offset(0, 2),
                ),
              ],
            ),
          ),
        ),
    ],
  );
}

内容的提问来源于stack exchange，提问作者Mado