如何在颤动中将 ListTile 连接到音频小部件

Posted 2023-02-23

【中文标题】如何在颤动中将 ListTile 连接到音频小部件

【英文标题】：How to connect A ListTile to an Audio Widget in flutter

【发布时间】：2021-12-01 14:14:32

【问题描述】：

我想将 2 个 ListTiles 连接在一起。我有一个使用 ListView.builder 创建的 ListTiles 列表。我还有一个需要 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 包作为音频链接就像this。

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 当我单击其中一个时，我将被带到一个单独的页面，每个页面都包含我的音频播放器小部件，该小部件有一个播放按钮，以便我之后可以收听音频。任何建议会很棒。 任何答案都会有所帮助。

【问题讨论】：

您能提供当前代码的任何图片或视觉效果吗？不清楚您实际想要做什么，任何视觉效果都会有所帮助！

我可以，但不是在这里，我觉得在这里发帖不方便。

@MikeOsborn 也许您想要实现的目标的简单绘图会很棒，但不太确定您希望它是什么样子。

请阅读我的回答，看看是否有帮助。

【参考方案1】：

您只需添加一个“Item”模型类作为音频小部件的必需属性。我说的是“Item”，但实际上是 items[index]。

这是音频小部件实现中的样子：

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%，但如果这不起作用，请提供更多关于您想要的设置的信息。