Flutter本地歌曲元数据加载完成后渲染列表组件方案咨询

你的核心问题在于当前使用StatelessWidget无法管理异步加载状态，且没有等待所有元数据获取完成就直接渲染了空列表。下面是针对性的解决方案：

第一步：重构为StatefulWidget并创建统一元数据模型 #

首先把FilePickerTrial改成StatefulWidget（只有状态组件才能跟踪异步加载状态、触发UI更新），同时用一个类封装歌曲元数据，替代分散的多个列表，避免索引不一致问题：

// 封装歌曲元数据的模型类
class SongMetadata {
  final String path;
  final String title;
  final String author;
  final int duration;

  SongMetadata({
    required this.path,
    required this.title,
    required this.author,
    required this.duration,
  });
}

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

  @override
  State<FilePickerTrial> createState() => _FilePickerTrialState();
}

class _FilePickerTrialState extends State<FilePickerTrial> {
  final FlutterFFprobe _flutterFFprobe = FlutterFFprobe();
  List<SongMetadata> _songs = [];
  bool _isLoading = false; // 跟踪元数据加载状态

第二步：修改文件选择与元数据加载逻辑 #

点击"添加"按钮时，先清空旧数据、标记加载状态为true，然后批量获取所有选中歌曲的元数据，等全部加载完成后再统一更新UI：

// 替换原添加按钮的onPressed逻辑
IconButton(
  icon: const Icon(Icons.add_circle, color: Colors.black),
  onPressed: () async {
    FilePickerResult? pathResult = await FilePicker.platform.pickFiles(
      type: FileType.audio,
      allowMultiple: true,
    );

    if (pathResult == null) return; // 用户取消选择文件时直接返回

    setState(() {
      _isLoading = true;
      _songs.clear(); // 清空旧的歌曲数据
    });

    List<SongMetadata> newSongs = [];
    // 遍历所有选中的文件，批量获取元数据
    for (String? path in pathResult.paths) {
      if (path == null) continue;
      try {
        final info = await _flutterFFprobe.getMediaInformation(path);
        final properties = info.getMediaProperties();
        final tags = properties['tags'] as Map? ?? {};
        
        newSongs.add(SongMetadata(
          path: path,
          title: tags['title'] as String? ?? '未知标题',
          author: tags['artist'] as String? ?? '未知艺术家',
          duration: int.tryParse(properties['duration'] as String? ?? '0') ?? 0,
        ));
      } catch (e) {
        print('加载歌曲元数据失败: $e');
        // 可在这里添加错误处理，比如跳过该文件或提示用户
      }
    }

    // 所有元数据加载完成后，统一更新状态
    setState(() {
      _isLoading = false;
      _songs = newSongs;
    });
  },
),

第三步：根据状态渲染对应UI #

在页面主体部分，根据加载状态和歌曲列表长度，分别显示加载指示器、空状态提示或完整歌曲列表：

body: _isLoading
    ? const Center(child: CircularProgressIndicator()) // 加载中显示转圈指示器
    : _songs.isEmpty
        ? const Center(child: Text('还未选择任何歌曲')) // 无数据时的提示
        : ListView.builder(
            itemCount: _songs.length,
            itemBuilder: (BuildContext context, int index) {
              final song = _songs[index];
              return BookInfoTile(
                bookCoverImageURL: 'assets/no_cover.png',
                bookTitle: song.title,
                authorName: song.author,
                bookLength: song.duration,
                onClick: () {
                  print('Button is Clicked');
                },
              );
            },
          ),

改动说明 #

1. StatefulWidget：通过setState方法通知UI更新，解决了原StatelessWidget无法响应数据变化的问题。
2. 统一元数据模型：用SongMetadata类集中管理歌曲信息，避免了多个独立列表可能出现的索引错位问题。
3. 加载状态管理：通过_isLoading变量，在元数据加载过程中显示加载指示器，避免用户看到空列表的尴尬。
4. 批量更新UI：等所有元数据加载完成后再调用setState，确保列表一次性渲染所有内容，符合你的需求。
5. 异常处理与默认值：添加了try-catch捕获加载错误，同时给缺失的元数据设置默认值，避免空指针异常。

内容的提问来源于stack exchange，提问作者Parth Patel