Flutter Web中使用FilePicker选择文件后文件名不显示，setState是否正确调用？

嗨，我看到你遇到的问题啦！别担心，这是个很常见的小疏忽，咱们马上就能解决它～

问题根源 #

你代码里的核心问题出在selectFile方法的setState块里：你重新声明了一个局部变量fileNameSelected，而不是更新类的成员变量。这样类顶部定义的fileNameSelected根本没被修改，UI自然不会跟着更新啦。

看你原来的代码片段：

setState(() {
  String fileNameSelected = basename(result.files.single.name);
});

这里的String fileNameSelected是一个只在当前代码块生效的新变量，和类成员变量完全无关——这就是为什么print能输出文件名，但UI里的文本始终没变化的原因。

修复方案 #

只需要去掉setState里的String关键字，直接赋值给类的成员变量即可：

Future selectFile() async {
  FilePickerResult? result = await FilePicker.platform.pickFiles(
      type: FileType.custom,
      allowMultiple: false,
      allowedExtensions: ['pdf']);

  if (result == null) {
    return;
  } else {
    print(result.files.single.name);
    setState(() {
      // 去掉前面的String，直接更新类成员变量
      fileNameSelected = basename(result.files.single.name);
    });
  }
}

为什么这样有效？ #

当你去掉String后，代码会引用类顶部定义的fileNameSelected成员变量，setState会通知Flutter框架状态发生了变化，从而触发UI重新构建，这样Text(fileName)就能显示最新的选中文件名啦。

额外小提示 #

你已经正确导入了package:path/path.dart，所以basename函数可以正常截取文件名，不需要额外调整。

修改后再测试一下，你应该就能看到选中的文件名正常显示在UI里了😉

内容的提问来源于stack exchange，提问作者Rouge Muralee