You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

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还是上一次选择的旧值,因此文件列表永远滞后一个选择周期。

修复方案
  1. 移除按钮点击事件中单独调用的listFiles(path),将文件拉取逻辑移动到selectDir()内部,在拿到用户选择的最新目录路径后,直接传入listFiles执行,不需要依赖state中path的更新
  2. 用户取消选择目录(路径为空)时,同步清空文件列表,避免读取空路径产生异常

修复后核心代码如下:

// 调整后的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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.28 00:01:20