如何在Flutter中显示外部存储路径下的图像？

Question

我基本上是Flutter的新手。我想显示特定路径（例如“Storage/WhatsApp/Media/”）中的图像。我想以网格视图的方式显示所有图像。在Flutter中，如何实现这一点？我看过很多例子，但每个人都在使用资产文件夹。以下是获取路径的代码，请问如何在网格视图中显示它们？

 Future<String> get localpath async
 {
  final dir=await getExternalStorageDirectory();
  return dir.path;
 }

 Future<File> get localfile async{
 final path=await localpath;
 return File('$path/WhatsApp/Media/WhatsApp Images');
}

Future<String> readData() async{
try{
  final file=await localfile;
  String image_path=await file.readAsString();
  return image_path;
}
catch(e) {return e.toString();}
}

现在我知道如何在网格视图中显示图片了吗？我应该使用gridview.builder吗？

- user8141219

---

你正在走上正确的道路。确保查看 FileImage 类，并使用 Gridview.builder 应该可以正常工作。请参阅此 博客。 - Oswin Noetzelmann

我明白了。但是假设目录中有10张图片，比如'WA001.JPG, WA004.JPG'。我应该创建一个数组列表并将其发送到FileImage吗？ - user8141219

不，GridView.builder使用列表来构建itembuilder属性内的10个FileImages - 可以参考我链接的博客上的示例。 - Oswin Noetzelmann

Answer 1

提供您的存储路径，即可显示图像。

Image.file(File(imagePath);

- Sumit Singh

---

这是实现的最佳方式！谢谢兄弟！！！ - Nghien Nghien

Answer 2

我尝试使用path_provider遵循与您类似的方法来获取文件。然而，即使使用getExternalStorageDirectory()，该插件也只能获取应用程序目录，这种行为也在Stack Overflow post中指出。

相反，我使用ext_storage访问设备存储。

此示例应用程序演示了如何使用ext_storage在设备的/Download文件夹中获取文件，使用permission_handler处理权限、文件扩展名检查，并在GridView上显示路径中的图像。

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:ext_storage/ext_storage.dart';
import 'package:permission_handler/permission_handler.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  Future _futureGetPath;
  List<dynamic> listImagePath = List<dynamic>();
  var _permissionStatus;

  @override
  void initState() {
    super.initState();
    _listenForPermissionStatus();
    // Declaring Future object inside initState() method
    // prevents multiple calls inside stateful widget
    _futureGetPath = _getPath();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Expanded(
            flex: 1,
            child: FutureBuilder(
              future: _futureGetPath,
              builder: (BuildContext context, AsyncSnapshot snapshot) {
                if (snapshot.hasData) {
                  var dir = Directory(snapshot.data);
                  print('permission status: $_permissionStatus');
                  if (_permissionStatus) _fetchFiles(dir);
                  return Text(snapshot.data);
                } else {
                  return Text("Loading");
                }
              },
            ),
          ),
          Expanded(
            flex: 19,
            child: GridView.count(
              primary: false,
              padding: const EdgeInsets.all(20),
              crossAxisSpacing: 10,
              mainAxisSpacing: 10,
              crossAxisCount: 3,
              children: _getListImg(listImagePath),
            ),
          )
        ],
      ),
    );
  }

  // Check for storage permission
  void _listenForPermissionStatus() async {
    final status = await Permission.storage.request().isGranted;
    // setState() triggers build again
    setState(() => _permissionStatus = status);
  }

  // Get storage path
  // https://pub.dev/documentation/ext_storage/latest/
  Future<String> _getPath() {
    return ExtStorage.getExternalStoragePublicDirectory(
        ExtStorage.DIRECTORY_DOWNLOADS);
  }

  _fetchFiles(Directory dir) {
    List<dynamic> listImage = List<dynamic>();
    dir.list().forEach((element) {
      RegExp regExp =
      new RegExp("\.(gif|jpe?g|tiff?|png|webp|bmp)", caseSensitive: false);
      // Only add in List if path is an image
      if (regExp.hasMatch('$element')) listImage.add(element);
      setState(() {
        listImagePath = listImage;
      });
    });
  }

  List<Widget> _getListImg(List<dynamic> listImagePath) {
    List<Widget> listImages = List<Widget>();
    for (var imagePath in listImagePath) {
      listImages.add(
        Container(
          padding: const EdgeInsets.all(8),
          child: Image.file(imagePath, fit: BoxFit.cover),
        ),
      );
    }
    return listImages;
  }
}

注意，这仅涵盖在GridView上显示图像的基础知识。为了进行缩放，我建议遵循性能最佳实践指南。

- Omatt

Answer 3

localfile 返回异步值，因此需要使用 await 进行调用，然后使用 setState() 进行更新。

示例：

Future<File> get localfile async {
  final path= await localpath;
  return File('$path/WhatsApp/Media/WhatsApp Images');
}

File file = await localfile;
setState(() {});

使用Image.file小部件显示存储文件

  Image.file(file, fit: BoxFit.cover,)

注意：文件对象最初将为null，因为它正在获取异步值，所以可以使用三元操作符显示进度指示器或任何其他小部件。

- Jitesh Mohite