ListView.Builder play / Pause buttom flutter
Saya menggunakan ListView.builder untuk membuat daftar audio, saya perlu mengubah tombol putar jeda satu per satu ke item ketika saya memilihnya, saya telah mencoba bool tetapi memberikan putar atau jeda mengubah semua item dalam daftar, seseorang dapat Anda membantu dengan itu ??
Jawaban
Anda mungkin memiliki daftar boolean untuk menyimpan tombol mana yang dipilih, kemudian meneruskan bool sebagai parameter ke widget audio, dan menggunakan bool untuk mengubah ikon.
Juga berikan fungsi callback untuk mengubah daftar bool, karena Anda harus mengubah daftar dari widget induk, sehingga diperlukan fungsi 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
});
}
ListView:
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.
),
),
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;
});
});
}
}
Jangan gunakan satu bool untuk semua audio Anda, Anda dapat menggunakan koleksi untuk menentukan bool untuk semua yang ada di audioList Anda, dan saat Anda mengklik, ubah bool untuk audio tersebut.