我想显示音频滑块到我的卡，当用户点击那张卡，它会播放歌曲，并显示滑块到那张卡只

Question

这是我的歌曲列表

这里是包含卡片在卡片列表

帮我把滑块显示给我的这个音乐应用程序，就像这样

帮助我显示这样的滑块到我的扑动应用程序

**这里是包含卡片在卡片列表**的img

帮我把滑块显示给我的这个音乐应用程序，就像这样

这就是我想要在我的应用中显示滑动条的方式

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:audioplayers/audioplayers.dart';
import 'package:punjabi_collection/services/music_model.dart' as mu;
import '../services/api_manage.dart';
class Musicplaylist extends StatefulWidget {
@override
_MusicplaylistState createState() => _MusicplaylistState();
}
class _MusicplaylistState extends State<Musicplaylist> {
AudioPlayer audioPlayer = new AudioPlayer();
Duration duration = new Duration();
Duration position = new Duration();
bool playing = false;
mu.Data _data;
List<mu.Audio> _audio = [];
bool _loading;
@override
void initState() {
super.initState();
_loading = true;
_getData();
initPlayer();
}
_getData() async {
_data = await Services.getData();
_audio = _data.audio;
setState(() {
_loading = false;
});
}
void initPlayer() {
audioPlayer = new AudioPlayer();
audioPlayer.durationHandler = (d) => setState(() {
duration = d;
});
audioPlayer.positionHandler = (p) => setState(() {
position = p;
});
}
void seekToSecond(int second) {
Duration newDuration = Duration(seconds: second);
audioPlayer.seek(newDuration);
}
Widget slider() {
return Slider.adaptive(
activeColor: Colors.blue,
inactiveColor: Colors.orange,
min: 0.0,
value: position.inSeconds.toDouble(),
max: duration.inSeconds.toDouble(),
onChanged: (double value) {
setState(() {
seekToSecond(value.toInt());
value = value;
});
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.transparent,
title: Text('Punjabi songs',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.black, fontSize: 20.0)),
actions: [
IconButton(
icon: Icon(Icons.search, size: 30.0, color: Colors.black),
onPressed: null),
IconButton(
icon: Icon(Icons.favorite, size: 30.0, color: Colors.redAccent),
onPressed: () {})
],
),
body: _loading
? Center(
child: CircularProgressIndicator(
backgroundColor: Colors.amber,
))
: Container(
child: ListView.builder(
// physics: ScrollPhysics(),
shrinkWrap: true,
itemCount: _data.audio.length,
itemBuilder: (BuildContext context, int index) {

mu.Audio audio = _audio[index];
return Card(
elevation: 0.0,
child: Column(
children: [
ListTile(
onTap: () async {
audioPlayer.pause();
debugPrint('${audio.title}');
// await audioPlayer.setUrl(
//     
//         audio.image);
},
leading: Image(
image: audio.hashCode.hashCode.hashCode.isEven
? AssetImage(
'./assets/blue.png',
)
: AssetImage('./assets/playb.png'),
fit: BoxFit.cover,
),
title: Text(
audio.title,
),
trailing: IconButton(
icon: Icon(
Icons.favorite_border_rounded,
size: 30.0,
color: Colors.red,
),
onPressed: () async {
int status = await audioPlayer.play(

audio.image.replaceAll(" ", "%20"),
);
if (status == 1) {
setState(() {
playing = true;
});
} else {
setState(() {
playing = false;
});
}
}),
),
],
),
);
},
),
),
);
}
}

Answer 1

你可以在Visibility中包装slider，并且可以控制它的可视性和slider的功能，或者使用gestredetector包装你的listtile或card widget来播放音乐。下面是示例代码，用于在单击列表项时显示和隐藏滑块:

@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: 500,
alignment: Alignment.center,
child: ListView.builder(
scrollDirection: Axis.vertical,
//   physics: AlwaysScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: items == null ? 0 : items.length,
padding: EdgeInsets.all(2.0),
itemBuilder: (BuildContext context, int index) {
return GestureDetector(
onTap: () {
setState(() {
if (selected != items[index])
selected = items[index];
else
selected = null;
});
},
child: Column(
children: [
Row(
children: [
CircleAvatar(
child: Center(
child: Text(
items[index][0].toUpperCase(),
style: TextStyle(color: Colors.white),
),
),
),
SizedBox(
width: 8,
),
Expanded(child: Text(items[index])),
],
),
Visibility(
visible: selected == items[index],
child: slider(),
),
Divider(),
],
),
);
},
),
),
);
}