如何在Flutter中使用CarouselSlider实现图示环形变换轮播效果？

目前官方维护的carousel_slider最新稳定版已经完全适配空安全，无需使用其他兼容性差的第三方包，搭配自定义变换逻辑即可实现图中效果。

步骤1：添加依赖 #

在pubspec.yaml中引入适配空安全的最新版本：

dependencies:
  flutter:
    sdk: flutter
  carousel_slider: ^4.2.1 # 官方稳定版已完全支持空安全

步骤2：核心实现代码 #

通过自定义轮播项的缩放和垂直偏移，模拟圆形轨道滚动效果：

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';

class CircularCarousel extends StatefulWidget {
  const CircularCarousel({super.key});

  @override
  State<CircularCarousel> createState() => _CircularCarouselState();
}

class _CircularCarouselState extends State<CircularCarousel> {
  int _currentIndex = 0;
  // 轮播数据源可替换为自己的业务数据
  final List<String> _imgList = [
    'https://picsum.photos/200/300?random=1',
    'https://picsum.photos/200/300?random=2',
    'https://picsum.photos/200/300?random=3',
    'https://picsum.photos/200/300?random=4',
    'https://picsum.photos/200/300?random=5',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CarouselSlider.builder(
          itemCount: _imgList.length,
          options: CarouselOptions(
            height: 200,
            viewportFraction: 0.3, // 控制单屏显示的item数量，值越小显示越多
            enlargeCenterPage: false, // 关闭默认放大逻辑，使用自定义变换
            onPageChanged: (index, reason) {
              setState(() {
                _currentIndex = index;
              });
            },
          ),
          itemBuilder: (context, index, realIndex) {
            // 计算当前item和中心项的偏移差
            double offset = (index - _currentIndex).abs().toDouble();
            // 缩放逻辑：越靠近中心越大，最小缩放值可自定义
            double scale = 1 - (offset * 0.2).clamp(0, 0.6);
            // 垂直偏移逻辑：越靠近两侧的item越靠下，模拟圆形轨迹
            double yOffset = offset * 30;

            return Transform.translate(
              offset: Offset(0, yOffset),
              child: Transform.scale(
                scale: scale,
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(12),
                    image: DecorationImage(
                      image: NetworkImage(_imgList[index]),
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

参数调整说明 #

• 调整viewportFraction数值可以控制同屏展示的轮播项数量，数值越小展示的项越多
• 修改scale的计算系数可以调整边缘项的缩小幅度
• 修改yOffset的计算系数可以调整圆形轨迹的弧度大小，数值越大弧度越明显
• 不想依赖第三方包的话，可以直接用PageView组件搭配上述变换逻辑实现，效果完全一致，不存在适配问题

内容的提问来源于stack exchange，提问作者Yusuf Güzel