ListView.Builder riproduce/mette in pausa il battito del pulsante

Question

Sto usando un ListView.builder per creare un elenco audio, ho bisogno di cambiare la pausa del pulsante di riproduzione individualmente su un elemento quando lo seleziono, ho provato un bool ma dando riproduzione o pausa cambia tutti gli elementi nell'elenco, qualcuno può mi aiuti in questo??

Answer 1

Potresti avere un elenco di booleani per salvare quale pulsante è selezionato, quindi passare il bool come parametro al widget audio e utilizzare il bool per cambiare l'icona.

Passa anche una funzione di callback per modificare l'elenco bool, poiché devi modificare l'elenco dal widget principale, quindi è necessaria una funzione di callback.

 List<bool> audioSelectedList = List.generate(AudioList.length, (i) => false);

// This is a callback function that Audio will call when the button is clicked.
  selected(int index){
// set only one bool to be true
    setState(() {
      audioSelectedList=List.generate(AudioList.length, (i) => false);// set all to false
      audioSelectedList[index]=true;  // set the selected index to be true
    });
  }

Visualizzazione elenco:

ListView.builder(
          itemCount: AudioList.length,
          itemBuilder: (context, index) => Audio(
            selected: selected, // pass the callback function
            index: index, // use to call selected(index)
            isSelected: audioSelectedList[index], // only one bool is true in the list which is the selected index.
          ),
        ),

Answer 2

import 'package:flutter/material.dart';

class Sample extends StatefulWidget {
  @override
  _SampleState createState() => _SampleState();
}

class _SampleState extends State<Sample> {
  bool isPressed = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          Column(
            children: [
              IconButton(
                  icon: Icon(isPressed
                      ? Icons.play_circle_filled
                      : Icons.pause_circle_filled),
                  onPressed: () {
                    setState(() {
                      isPressed = !isPressed;
                    });
                  }),
              IconButton(
                  icon: Icon(isPressed
                      ? Icons.play_circle_filled
                      : Icons.pause_circle_filled),
                  onPressed: () {
                    setState(() {
                      isPressed = !isPressed;
                    });
                  }),
              PlayPause(
                isPressed: isPressed,
              ),
              PlayPause(),
            ],
          )
        ],
      ),
    );
  }
}

class PlayPause extends StatefulWidget {
  const PlayPause({
    Key key,
    this.isPressed = false,
  }) : super(key: key);
  final bool isPressed;

  @override
  _PlayPauseState createState() => _PlayPauseState();
}

class _PlayPauseState extends State<PlayPause> {
  bool _isPressed;
  @override
  void initState() {
    super.initState();
    _isPressed = widget.isPressed;
  }

  @override
  Widget build(BuildContext context) {
    return IconButton(
        icon: Icon(
            _isPressed ? Icons.play_circle_filled : Icons.pause_circle_filled),
        onPressed: () {
          setState(() {
            _isPressed = !_isPressed;
          });
        });
  }
}

Answer 3

Non usare un bool per tutto il tuo audio, puoi usare le raccolte per definire un bool per tutto nel tuo audioList e quando fai clic, cambia il bool per l'audio.