如何在Flutter中实现仅支持左右滑动的手动轮播滑块？

针对carousel_slider: ^4.2.1，只需配置核心参数就能实现你要的效果，直接看示例和说明：

核心参数说明 #

• autoPlay: false：彻底关闭自动轮播
• prevButtonVisible: false + nextButtonVisible: false：隐藏默认左右切换按钮
• enableInfiniteScroll：可选，设为false则滑动到首尾后停止，设为true支持无限循环滑动，按需选择
• viewportFraction: 1.0：让每张图片占满轮播容器宽度，适配全屏场景

完整示例代码 #

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

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

  @override
  State<SwipeOnlyCarousel> createState() => _SwipeOnlyCarouselState();
}

class _SwipeOnlyCarouselState extends State<SwipeOnlyCarousel> {
  // 替换为你的图片资源（本地/网络均可）
  final List<String> imageSources = [
    'assets/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      items: imageSources.map((source) {
        return Container(
          width: MediaQuery.of(context).size.width,
          child: source.startsWith('http')
              ? Image.network(source, fit: BoxFit.cover)
              : Image.asset(source, fit: BoxFit.cover),
        );
      }).toList(),
      options: CarouselOptions(
        autoPlay: false,
        prevButtonVisible: false,
        nextButtonVisible: false,
        enableInfiniteScroll: true, // 按需改为false关闭无限循环
        viewportFraction: 1.0,
        scrollPhysics: const AlwaysScrollableScrollPhysics(), // 确保滑动交互正常
      ),
    );
  }
}

额外补充 #

• 若需要监听页面切换事件，可在CarouselOptions中添加回调：

  onPageChanged: (index, reason) {
    setState(() {
      // 这里可更新当前索引或执行其他逻辑
    });
  },
  

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