窗口小部件功能在列窗口小部件中不起作用?

时间:2020-09-30 11:15:17

标签: flutter dart flutter-layout flutter-dependencies flutter-test

我正在构建MusicPlayer应用,因此我需要查看musicTiles列表,以便用户可以从内部存储中选择歌曲并进行播放。因此,我通过添加按钮在appbar中使用了File_Picker,用户可以从中从本地存储中提取音乐。所以我在file_picking函数中使用了async和await关键字。我将file_path和file_names存储在变量的列表类型中。之后,我在列窗口小部件中使用了_buidMusicTile()函数,但出现了以下错误:

=> 类型“ Future”不是“ Widget”类型的子类型

代码:

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(),
        ],
      ),
    );
  }
}

1 个答案:

答案 0 :(得分:1)

您不能在正文中使用await或从正文中调用的方法,因为这需要在屏幕上呈现,UI无法等待任何数据,我们需要对其进行更新。

解决方案:

只需从方法await中删除async_buildMusicTile,就像

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

并在setState()内添加onPressed()

setState(() {
        print(listofAudioNames);
        print(listofAudioFilesPath);
  });
相关问题