Flutter ListView 改变值

Question

我有一个问题：我在 Flutter with Songs 中有一个 ListView.builder，每个 Song 项目的左侧都有一个播放按钮。因此，我单击播放按钮，图标发生变化，歌曲开始播放。当我单击列表中的另一首歌曲时，如何将图标设置为从上一首歌曲停止？喜欢这个视频：

https://youtu.be/zAXN1QQMM-4

所以只需将前一个图标的 icon/bool 设置为 false，将新图标设置为 true。

Answer 1

我相信这就是您要找的。

您应该创建一个状态变量，在本例中为 _index。该值保存当前正在播放的项目的索引。在 ListView 小部件的 builder 方法中，您可以检查它的索引是否与州的索引相同。


import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: App()));

class App extends StatefulWidget {
  const App({
    Key? key,
  }) : super(key: key);

  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  /// The song that is currently selected.
  int? _index;

  void _updateSelected(int index) => setState(() => _index = index);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 10,
      itemBuilder: (context, index) {
        // Check whether the index is the selected index.
        final _isSelected = index == _index;

        return ListTile(
          title: Text('Song title'),
          // Change the icon based on `isSelected`.
          leading: Icon(_isSelected ? Icons.pause : Icons.play_arrow),
          // Call the method when the tile is tapped.
          onTap: () => _updateSelected(index),
        );
      },
    );
  }
}

Flutter ListView 改变值

Flutter ListView changing values

listview

boolean

list

audio-player

flutter