flutter - 如何在颤动中将 ListTile 连接到音频小部件
问题描述
我想将 2 个 ListTiles 连接在一起。我有一个使用创建的 ListTiles 列表。ListView.builder
我还有一个需要 URL 来播放音频小部件的音频包。
我ListView.Builder
的是这样的:
ListView.builder(
padding: const EdgeInsets.all(8),
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(items[index].name),
trailing: Icon(Icons.play_arrow),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Audio(),
),
);
},
);
},
),
我的音频小部件是这样的:
我正在使用Audio Players
音频链接包是这样的。
typedef OnError = void Function(Exception exception);
const kurl =
'https://download.quranicaudio.com/quran/mishaari_raashid_al_3afaasee/001.mp3';
const kurl2 =
'https://download.quranicaudio.com/quran/mishaari_raashid_al_3afaasee/002.mp3';
class Audio extends StatefulWidget {
@override
_AudioAppState createState() => _AudioAppState();
}
class _AudioAppState extends State<Audio> {
AudioPlayer advancedPlayer = AudioPlayer();
Widget remoteUrl() {
return SingleChildScrollView(
child: TabWrapper(
children: [
Text(
items.length.toString(),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
),
PlayerWidget(url: kurl),
Text(
items.length.toString(),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
),
PlayerWidget(url: kurl2),
],
),
);
}
@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
StreamProvider<Duration>.value(
initialData: const Duration(),
value: advancedPlayer.onAudioPositionChanged,
),
],
child: DefaultTabController(
length: 1,
child: Scaffold(
appBar: AppBar(
bottom: const TabBar(
tabs: [
Tab(text: 'Remote Url'),
],
),
title: const Center(
child: Text(
'Quran Audio',
style: TextStyle(fontSize: 30),
),
),
),
body: remoteUrl(),
),
),
);
}
}
我的目标是,ListTiles
当我单击其中一个时,我将被带到一个单独的页面,每个页面都包含我的音频播放器小部件,该小部件有一个播放按钮,因此我可以在之后收听音频。任何建议都会很棒。任何答案都会有所帮助。
解决方案
您只需添加一个“Item”模型类作为音频小部件的必需属性。我说的是“Item”,但实际上是 items[index] 是什么。
下面是它在 Audio Widget 实现中的样子:
class Audio extends StatefulWidget {
const Audio(this.item);
final /*Class Name of items[index]*/ item;
@override
_AudioAppState createState() => _AudioAppState();
}
class _AudioAppState extends State<Audio> {
AudioPlayer advancedPlayer = AudioPlayer();
Widget remoteUrl() {
return SingleChildScrollView(
child: TabWrapper(
children: [
Text(
widget.item.length.toString(),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
),
PlayerWidget(url: kurl),
Text(
widget.item.length.toString(),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25),
),
PlayerWidget(url: kurl2),
],
),
);
}
...
然后在 ListView.builder() 中简单地传入 items[index]。
ListView.builder(
padding: const EdgeInsets.all(8),
itemCount: items.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text(items[index].name),
trailing: Icon(Icons.play_arrow),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Audio(items[index]),
),
);
},
);
},
),
...
如果这是您正在寻找的设置,我不是 100%,但如果这不起作用,请提供更多关于您想要它的信息。
推荐阅读
- unit-testing - Flutter:Mockito http客户端单元测试异常
- javascript - 如何过滤对象成员
- reactjs - 如何更新数组内对象属性的值?
- python - 使用 Python 的 Lucas-Lehmer 测试不适用于大量数据
- python - 在 python 中为 DynamoDB 和表使用 Mock
- vba - VBA 代码显示错误并且找不到该错误
- android - React Native android 找不到 com.android.tools.build:gradle:3.6.3
- php - 如何在yii2中检查数据库中的现有记录和setFlash
- mongodb - 如何从 MongoDB 集合中的子文档中删除不匹配的值?
- javascript - 用户的特定时间间隔