You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Flutter的card_swiper轮播组件中停止自动循环播放?

问题修复方案

根因说明

card_swiper: ^1.0.2版本的逻辑设计中,loop: false仅限制手动滑动时无法跨首尾页循环滚动,不会自动终止自动播放任务,自动播放到最后一页后仍会触发跳回第一页的操作,因此会出现loop参数不生效的错觉。

修复步骤

  • 新增轮播控制器、自动播放开关两个状态变量,用于手动控制轮播运行状态
  • 在索引切换回调中判断当前是否到达最后一页,到达后主动终止自动播放逻辑
  • 优化音频播放器实例逻辑,避免每次播放都新建实例导致的内存泄露问题

完整修改后代码

import 'package:assets_audio_player/assets_audio_player.dart';
import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/material.dart';

class Chemistry extends StatefulWidget {
  @override
  _ChemistryState createState() => _ChemistryState();
}

class _ChemistryState extends State<Chemistry> {
  List images = [
    'assets/images/che/s.jpg',
    'assets/images/che/t.jpg',
    'assets/images/che/u.jpg',
    'assets/images/che/v.jpg',
    'assets/images/che/w.jpg',
    'assets/images/che/x.jpg',
    'assets/images/che/y.jpg',
    'assets/images/che/z.jpg',
  ];
  // 新增状态变量
  late AssetsAudioPlayer _audioPlayer;
  bool _autoplayEnabled = true;
  final SwiperController _swiperController = SwiperController();

  @override
  void initState() {
    super.initState();
    // 初始化音频播放器,全局复用一个实例
    _audioPlayer = AssetsAudioPlayer.newPlayer();
  }

  @override
  void dispose() {
    // 页面销毁时释放资源
    _audioPlayer.dispose();
    _swiperController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Swiper(
        itemCount: images.length,
        loop: false,
        // 绑定轮播控制器
        controller: _swiperController,
        itemBuilder: (BuildContext context, int index) {
          return Padding(
            padding: const EdgeInsets.all(27.0),
            child: Image.asset(
              images[index],
            ),
          );
        },
        indicatorLayout: PageIndicatorLayout.COLOR,
        onIndexChanged: (index) {
          playaudio(index);
          // 到达最后一页时停止自动播放
          if (index == images.length - 1) {
            setState(() {
              _autoplayEnabled = false;
            });
            _swiperController.stopAutoplay();
          }
        },
        autoplayDelay: 4000,
        // 绑定自动播放开关
        autoplay: _autoplayEnabled,
        pagination: FractionPaginationBuilder(
            color: Colors.red, activeColor: Colors.green, fontSize: 10),
        // control: SwiperControl(),
      ),
    );
  }

  void playaudio(int index) async {
    _audioPlayer.open(
      Audio('assets/audio/Chemistry/a$index.mp3'),
    );
  }
}

内容的提问来源于stack exchange,提问作者user10993979

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.10.09 12:36:03