flutter - 在 ListView.builder 小部件中监听索引变量的变化

Question

我有一个简单的应用程序代码，只要用户点击某个元素，它就会读取音频。我使用 Listview.builder 来实现这一点。现在，我想使用颤动文本来读取每个元素的索引，只需滚动它即可，这意味着 Listview.builder 的索引但只有一次。我正在寻找一种方法来收听索引更改，以便我可以在它更改时执行一个函数，但我似乎无法弄清楚如何。这是我的代码：

import 'package:audioplayers/audioplayers.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_tts/flutter_tts.dart';

class GeneralInfo extends StatefulWidget {
  @override
  _GeneralInfoState createState() => _GeneralInfoState();
}

class _GeneralInfoState extends State<GeneralInfo> {
  List<AudioPlayer> audioplayers = [
    AudioPlayer(playerId: 'firstplayer'),
    AudioPlayer(playerId: 'secondplayer'),
    AudioPlayer(playerId: 'third'),
    AudioPlayer(playerId: 'forth')
  ];

  TtsState ttsState = TtsState.stopped;

  get isPlaying => ttsState == TtsState.playing;

  get isStopped => ttsState == TtsState.stopped;
  int counter = 0;
  int index1;
  bool yes = false;
  bool playing = false;
  bool check = false;
  FlutterTts flutterTts;
  @override
  void initState() {
    super.initState();
    initTts();
    for (var i = 0; i < 4; i++) {
      audioplayers[i].setUrl(urls[i]);

      //-----------------------------------
    }
  }

  initTts() {
    flutterTts = FlutterTts();
    flutterTts.setLanguage("ar-AE");

    flutterTts.setStartHandler(() {
      setState(() {
        print("Playing");
        ttsState = TtsState.playing;
      });
    });

    flutterTts.setCompletionHandler(() {
      setState(() {
        print("Complete");
        ttsState = TtsState.stopped;
        check = true;
      });
    });
  }

  Future _speak(String word) async {
    await flutterTts.awaitSpeakCompletion(true);
    await flutterTts.speak(word);
  }

  List<String> urls = [
    'https://firebasestorage.googleapis.com/v0/b/basari-f6b13.appspot.com/o/sample.mp3?alt=media&token=37199f5a-4235-46c5-839b-98215ba3d19d',
    'https://firebasestorage.googleapis.com/v0/b/basari-f6b13.appspot.com/o/test.mp3?alt=media&token=a7c98dfe-f1f4-4c3c-a8b1-c10d765d4d6b',
    'https://firebasestorage.googleapis.com/v0/b/basari-f6b13.appspot.com/o/sample.mp3?alt=media&token=37199f5a-4235-46c5-839b-98215ba3d19d',
    'https://firebasestorage.googleapis.com/v0/b/basari-f6b13.appspot.com/o/test.mp3?alt=media&token=a7c98dfe-f1f4-4c3c-a8b1-c10d765d4d6b'
  ];

  void getAudio(int index, AudioPlayer audioPlayer) async {
    if (playing) {
      //pause
      var res = await audioPlayer.pause();
      if (res == 1) {
        setState(() {
          playing = false;
        });
      }
    } else {
//play
      audioPlayer.setVolume(10);
      var res = await audioPlayer.play(urls[index], isLocal: true);
      if (res == 1) {
        setState(() {
          playing = true;
        });
      }
    }
  }

 void onChange(int index1){
   //GeneralInfo.index1.notifyListeners();
 }
  @override
  void dispose() {
    super.dispose();
    flutterTts.stop();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.brown,
      body: ListView.builder(
        cacheExtent: 5,
        scrollDirection: Axis.vertical,
        itemCount: 4,
        itemBuilder: (context, index) {
                   

          // print("$index");

          return Align(
            alignment: Alignment.center,
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 10, vertical: 1),
              child: GestureDetector(
                onTap: () {
                  didChangeDependencies();
                  getAudio(index, audioplayers[index]);
                },
                child: Container(
                    height: MediaQuery.of(context).size.height,
                    width: MediaQuery.of(context).size.width * 0.9,
                    color: Colors.amber),
              ),
            ),
          );
        },
      ),
    );
  }
}

enum TtsState {
  playing,
  stopped,
}

标签： flutterlistviewdartlisten