asynchronous - 如何使用 future 的列表并在 listView 中使用它

Question

我正在尝试获取某个目录中所有文件的列表。

我从名为 getUserVideos() 的 future 函数中获取文件，如果在函数内部我尝试打印数据，我可以看到结果，但我不能在函数外部使用数据.

class _mediaUtentiState extends State<mediaUtenti> {
  var lightBlue = Color.fromRGBO(0, 197, 205, 1.0);
  var _imagesDir;


  @override
  void initState() {
    super.initState();
    getUsersVideos();
  }

  List<String> Names = [
    'Abhishek',
    'John',
    'Robert',
    'Shyam',
    'Sita',
    'Gita',
    'Nitish'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: lightBlue,
      appBar: new AppBar(
        title: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            Container(padding: const EdgeInsets.all(8.0), child: Text('Nome')),
            Container(
              child: CircleAvatar(
                backgroundImage: NetworkImage('http://i.pravatar.cc/300'),
              ),
            ),
          ],
        ),
        backgroundColor: purple,
      ),

      body: new Container(
        child: new ListView.builder(
          reverse: false,
          itemBuilder: (_, int index) => EachList(this.Names[index]),
          itemCount: this.Names.length,
        ),
      ),
    );
  }

  Future<String> getUsersVideos() async {
    print('something');
    final Directory extDir = await getExternalStorageDirectory();
    final String dirPath = '${extDir.path}/Movies/Veople';
    final myDir = new Directory(dirPath);
    List<FileSystemEntity> _images;
    _images = myDir.listSync(recursive: true, followLinks: false);
    print(_images.length);
    _imagesDir = _images;
  }
}

class EachList extends StatelessWidget {
  final String name;
  EachList(this.name);
  @override
  Widget build(BuildContext context) {
    return new Card(
      child: new Container(
        padding: EdgeInsets.all(8.0),
        child: new Row(
          children: <Widget>[
            new CircleAvatar(
              child: new Text(name[0]),
            ),
            new Padding(padding: EdgeInsets.only(right: 10.0)),
            new Text(
              name,
              style: TextStyle(fontSize: 20.0),
            )
          ],
        ),
      ),
    );
  }
}

现在我只显示名称列表，但我想为路径中的每个文件显示一张卡片。

例如，在函数 getUserVideos() 中，当我尝试打印 imagesDir 时，我得到了正确的结果 [File: '/storage/emulated/0/Movies/Veople/1556217605345.mp4'，文件:'/storage/emulated/0/Movies/Veople/1556217605345.png'，文件:'/storage/emulated/0/Movies/Veople/1556217632709.mp4'，文件:
...]
但我无法以任何方式从该函数访问 _imageDir。

我确定可以用几行代码解决这个问题，但现在已经 3 个小时了，我无法找到解决方案。

谢谢!

Answer 1

我认为这肯定已经得到了回答，但是虽然有很多关于 FutureBuilder 和列表的问题，但没有一个是完全像这样的或者没有得到充分的回答。

我会这样做:

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:path_provider/path_provider.dart';

Future<List<FileSystemEntity>> _getUsersVideos() async {
  print('something');
  final Directory extDir = await getExternalStorageDirectory();
  final String dirPath = '${extDir.path}/Movies/Veople';
  final myDir = new Directory(dirPath);
  List<FileSystemEntity> _images = myDir.listSync(recursive: true, followLinks: false);
  return _images;
}

class ListFromFuture extends StatefulWidget {
  @override
  _ListFromFutureState createState() => _ListFromFutureState();
}

class _ListFromFutureState extends State<ListFromFuture> {
  Future<List<FileSystemEntity>> future;

  @override
  void initState() {
    super.initState();
    future = _getUsersVideos();
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: future,
      builder: (context, snapshot) {
        switch (snapshot.connectionState) {
          case ConnectionState.none:
          case ConnectionState.waiting:
          case ConnectionState.active:
            return Container(
              alignment: Alignment.center,
              child: Text("Loading"),
            );
            break;
          case ConnectionState.done:
            if (snapshot.hasError) {
              // return whatever you'd do for this case, probably an error
              return Container(
                alignment: Alignment.center,
                child: Text("Error: ${snapshot.error}"),
              );
            }
            var data = snapshot.data;
            return new ListView.builder(
              reverse: false,
              itemBuilder: (_, int index) => EachList(data[index]),
              itemCount: data.length,
            );
            break;
        }
      },
    );
  }
}

其中的重要部分是:

1. future 只是设置它的 initState，而不是 build 函数。这确保每次构建小部件时都不会调用它
2. 我处理所有出现错误或 future 尚未完成的情况。

老实说，您的示例实际上非常接近于正常运行。您所要做的就是将设置 _imagesDir = images 的行包装在 setState(() => ...) 中，它应该可以工作(假设列表不会返回空)。不过，您还应该检查 _imagesDir == null，否则您可能会遇到空指针异常。