小部件功能在列小部件中不起作用？

Question

我正在构建一个 MusicPlayer 应用程序，所以我需要查看 musicTiles 列表，以便用户可以从内部存储中选择歌曲并播放它。因此，我通过添加按钮在 appbar 中使用了 File_Picker，用户可以从该按钮从本地存储中获取音乐。所以我在 file_picking 函数中使用了 async 和 await 关键字。我将 file_path 和 file_names 存储在 List 类型的变量中。之后，我在列小部件中使用了我的 _buidMusicTile() 函数，但它颤动了以下错误：

=> 类型“未来”不是类型“小部件”的子类型

代码：

class _MusicPageState extends State<MusicPage> {
  
  FileType _pickingType = FileType.any;
  TextEditingController _controller = TextEditingController();
  List<String> listofAudioFilesPath;
  List<String> listofAudioNames;

  @override
  void initState() {
    super.initState();
    _controller.addListener(() => _extension = _controller.text);
  }
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    //const Key centerKey = ValueKey('bottom-sliver-list');
    return Scaffold(
      backgroundColor: Colors.brown[300],
      appBar: AppBar(
        actions: [
          Container(
            width: size.width,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  IconButton(
                    icon: Icon(Icons.sort),
                    onPressed: () {},
                  ),
                  IconButton(
                    icon: Icon(Icons.add_circle),
                    onPressed: () async {
                      // _openFileExplorer();
                      FilePickerResult result = await FilePicker.platform
                          .pickFiles(allowMultiple: true);
                      if (result != null) {
                        listofAudioFilesPath = result.paths.toList();

                        listofAudioNames = result.names.toList();

                        print(listofAudioNames);
                        print(listofAudioFilesPath);
                      }
                    },
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
      body: Column(
        children: [
          Text('Music Library'),
          SizedBox(height: 10),
          Stack(
            children: [
              _buildMusicTile(listofAudioFilesPath, listofAudioNames),
            ],
          ),
        ],
      ),
    );
  }
}

_buildMusicTile(
    List<String> listofAudioFilesPath, List<String> listofAudioNames) async {
  List<String> listOfPath = await listofAudioFilesPath;
  List<String> listOfFiles = await listofAudioFilesPath;
  if (listofAudioFilesPath != null && listofAudioNames != null) {
    return ListView.separated(
      itemCount: listofAudioNames.length,
      separatorBuilder: (BuildContext context, int index) {
        return Container(
          height: 10,
          color: Colors.white,
        );
      },
      itemBuilder: (BuildContext context, int index) {
        return ListTile(
          leading: Icon(Icons.play_circle_filled),
          title: Text(
            '$listofAudioNames[$index]',
            style: TextStyle(color: Colors.black, fontSize: 25),
          ),
        );
      },
    );
  } else {
    return Center(
      child: Column(
        children: [
          Text(
            '$listofAudioNames',
            style: TextStyle(color: Colors.black, fontSize: 25),
          ),
          CircularProgressIndicator(),
        ],
      ),
    );
  }
}

Answer 1

你不能在 body 中使用 await 或者从 body 调用的方法，因为它需要在屏幕上渲染，UI 不能等待任何数据，我们需要更新它。

解决方案：

只需从方法 _buildMusicTile 中删除 await 和 async 即可

  List<String> listOfPath = listofAudioFilesPath;
  List<String> listOfFiles = listofAudioFilesPath;

并在onPressed() 中添加setState()

setState(() {
        print(listofAudioNames);
        print(listofAudioFilesPath);
  });