Flutter GridView未按预期更新 始终展示上一选中目录的文件
问题描述
- 预期实现功能:选择目录后,以卡片形式列出对应目录下所有文件
- 实际异常:文件列表始终存在一步延迟,展示的是上一次选中目录的文件
- 首次选择目录
D:\AM时,列表实际展示代码默认空路径下的文件 - 再次点击按钮选择
D:\AM\test目录(预期仅展示单个文本文件)时,列表实际展示的是上一次选中的D:\AM目录下的文件 - 选择目录时应用标题已经同步更新为最新选中的目录路径,但GridView的文件列表始终滞后一个选择周期
- 首次选择目录
- 异常效果截图:

- 预期正确效果截图(重复选择一次
D:\AM\test目录后才会出现该效果):
原问题代码
import 'package:file_picker/file_picker.dart'; import 'package:flutter/material.dart'; import 'dart:io'; class Demo3 extends StatefulWidget { const Demo3({Key? key}) : super(key: key); @override _Demo3State createState() => _Demo3State(); } class _Demo3State extends State<Demo3> { late String path = ''; var files = []; void selectDir() async { String? selectedDirectory = await FilePicker.platform.getDirectoryPath(); if (selectedDirectory == null) { setState(() { path = ""; }); } else{ setState(() { path = selectedDirectory; }); } print(path); } void listFiles(String paths) async { var dir = Directory(paths); List<FileSystemEntity> entities = await dir.list().toList(); setState(() { files = entities; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('$path'), actions: [ IconButton( onPressed: () { selectDir(); listFiles(path); }, icon: const Icon(Icons.browse_gallery), }, ] ), body: GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3 ), itemCount: files.length, itemBuilder:(BuildContext context, int index){ var test = files[index]; return Card( child: Text('$test'), ); } ) ); } }
问题根因
按钮点击事件中,selectDir()是异步方法,调用后会同步返回,不会等待用户选择目录、内部setState更新path的逻辑执行完成,就立刻运行下一行的listFiles(path),此时传入的path还是上一次选择的旧值,因此文件列表永远滞后一个选择周期。
修复方案
- 移除按钮点击事件中单独调用的
listFiles(path),将文件拉取逻辑移动到selectDir()内部,在拿到用户选择的最新目录路径后,直接传入listFiles执行,不需要依赖state中path的更新 - 用户取消选择目录(路径为空)时,同步清空文件列表,避免读取空路径产生异常
修复后核心代码如下:
// 调整后的selectDir方法 void selectDir() async { String? selectedDirectory = await FilePicker.platform.getDirectoryPath(); if (selectedDirectory == null) { setState(() { path = ""; files = []; // 取消选择时清空文件列表 }); } else{ setState(() { path = selectedDirectory; }); // 拿到最新选择的路径直接传入,读取文件列表 listFiles(selectedDirectory); } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('$path'), actions: [ IconButton( onPressed: () { // 仅调用selectDir即可,不需要在这里额外调用listFiles selectDir(); }, icon: const Icon(Icons.browse_gallery), ), ] ), // 其余GridView代码保持不变 // ... ); }
注意:Dart中async函数不会阻塞调用方的执行,函数内
await关键字标记的异步任务完成后,才会继续执行后续逻辑。原写法的执行顺序是:触发selectDir→发起目录选择请求→立刻执行listFiles(旧path)→用户选完目录→更新path为新值→下次触发选择时才会用这次的新path读文件,这就是延迟的本质原因。
内容的提问来源于stack exchange,提问作者AMM
相关产品推荐
相关产品推荐

