Flutter Web-设置状态 - 文件拾取器 - 文件名 /文件名未显示时，请选择文件挑选文件。 SetState是否正确应用？

Question

我对扑朔迷离和编码非常新。这可能是一个简单的修复程序，但是我找不到任何地方的解决方案或重新配置代码以显示我选择的文件的名称。

我正在尝试创建一个可以接受文档提交的网页。但是，我无法获得代码显示所选择的文件的名称。

但是，打印呼叫正在工作，但是，FileAnameselectected不会更新。

谢谢您的帮助！

import 'dart:html';
import 'dart:io' as io; //type cast

import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/material.dart';
import 'package:file_picker/file_picker.dart';
import 'package:path/path.dart';

import './appbar/appbar.dart';

class UploadFPage extends StatefulWidget {
  const UploadFPage({Key? key}) : super(key: key);

  @override
  State<UploadFPage> createState() => _UploadFPageState();
}

class _UploadFPageState extends State<UploadFPage> {
  UploadTask? task;
  File? file;
  String fileNameSelected = 'No File Selected';

  @override
  Widget build(BuildContext context) {
    final fileName = fileNameSelected;

    return Scaffold(
      appBar: AppBar(
        title: const Text('AppBar'),
      ),
      body: ListView(
        children: [
          Container(
            height: 300,
            color: Colors.amber,
            child: Row(
              children: [
                ElevatedButton.icon(
                  icon: const Icon(Icons.attach_file, size: 28),
                  onPressed: selectFile,
                  label: Text("Attach Invoice"),
                ),
                Text(fileName),
              ],
            ),
          ),
        ],
      ),
    );
  }

  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);
      //final name = result.files.single.name;
      //final path = result.files.single.path!;
      //final file = result.files.single.bytes!;

      setState(() {
        String fileNameSelected = basename(result.files.single.name);
        //file = File(size, path);
      });
    }
  }
}

Answer 1

更改：

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

通过

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

添加var，final或字符串在前方声明新变量（恰好具有与一个名称相同的名称您在上面声明）。您将选择的文件分配给了 - 它迅速脱离了范围。