ListView.Builder 재생 / 일시 중지 버튼 플러터

Aug 19 2020

ListView.builder를 사용하여 오디오 목록을 만들고 있습니다. 재생 버튼 일시 중지를 항목으로 개별적으로 변경해야합니다. 항목을 선택할 때 부울을 시도했지만 재생 또는 일시 중지를 제공하면 목록의 모든 항목이 변경됩니다. 당신은 그것을 도와 ??

답변

2 sleepingkit Aug 20 2020 at 00:44

어떤 버튼이 선택되었는지 저장하기위한 부울 목록이 있을 수 있습니다. 그런 다음 부울을 오디오 위젯에 매개 변수로 전달하고 부울을 사용하여 아이콘을 변경할 수 있습니다.

또한 부모 위젯에서 목록을 변경해야하므로 콜백 함수가 필요하므로 부울 목록을 변경하려면 콜백 함수를 전달하십시오 .

 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
    });
  }

목록보기:

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.
          ),
        ),
4 Reign Aug 20 2020 at 00:41
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;
          });
        });
  }
}

jack Aug 20 2020 at 02:26

모든 오디오에 하나의 부울을 사용하지 마십시오. 컬렉션을 사용하여 audioList의 모든 것에 대한 부울을 정의 할 수 있으며, 클릭 할 때 오디오에 대한 부울을 변경할 수 있습니다.