FLutter || 使用文件選擇器選擇文件並在 listview.builder 中顯示它們

Question

創建一個 function 以在 Elevated Button 的 onPressed() 上選擇文件，並將文件傳遞給新的 function openfiles()，然后在打開的文件 function 中，我調用一個小部件 show() 並將參數傳遞給它。 如何在listView中返回。 默認構造函數采用顯式子列表。 此構造函數適用於具有少量子項的列表視圖，因為構建 List 需要為可能顯示在列表視圖中的每個子項做工作，而不僅僅是那些實際可見的子項。

選擇文件 class

  return Scaffold(
    body: Column(
      children: [
        Container(
          child: ElevatedButton(
            onPressed: () async {
              final result =
                  await FilePicker.platform.pickFiles(allowMultiple:true);
              if (result == null) return;
              openFiles(result.files);
            },
            child: const Text("pick file"),
          ),
        ),
        Text("data"),
      ],
    ),
  );
  }
     void openFiles(List<PlatformFile> files) {
     show(files: files);
      }
    }

UI 中的列表視圖

    import 'package:file_picker/src/platform_file.dart';
    import 'package:flutter/material.dart';
    Widget show({
    List<PlatformFile>? files,
    }) {
    return Scaffold(
    body: ListView.builder(
        itemCount: files!.length,
        itemBuilder: (context, index) {
          final file = files[index];
          return buildFile(file);
          }),
     );}
    Widget buildFile(PlatformFile file) {
    final kb = file.size / 1024;
    final mb = kb / 1024;
    final size =
      (mb >= 1) ? '${mb.toStringAsFixed(2)} MB' : '${kb.toStringAsFixed(2)} KB';
    return Container(
    width: 100,
    height: 100,
    child: InkWell(
      onTap: () => null,
      child: Container(
        width: 200,
        height: 200,
        child: ListTile(
          leading: (file.extension == 'jpg' || file.extension == 'png')
              ? Image.file(
                  File(file.path.toString()),
                  width: 80,
                  height: 80,
                )
              : Container(
                  width: 80,
                  height: 80,
                ),
          title: Text('${file.name}'),
          subtitle: Text('${file.extension}'),
          trailing: Text(
            '$size',
            style: TextStyle(fontWeight: FontWeight.w700),
          ),
        ),
      ),
     ),
    );
    }

Answer 1

您的show() function 正在返回一個小部件，因此您必須將它放在小部件樹中的某個位置。

所以首先我會擺脫你的openFiles() function，因為它並沒有真正的目的。 然后在你的_pickFileState中初始化一個List class：

List<PlatformFile> files = [] //ANOTHER EDIT HERE,

然后將show()返回的小部件插入到小部件樹中：

Column(
  children: [
    Container(), //your Container here
    show(files: files), //here you insert your List
  ],
),

最后，當您在“onPressed”方法中更改 function 時：

ElevatedButton(
  onPressed: () async {
    final result = await FilePicker.platform.pickFiles(allowMultiple: true);
    if (result == null) return;
    files = result.files; //EDIT: THIS PROBABLY CAUSED YOU AN ERROR
    setState((){});
  },
)

您使用setState()來重建您的 Widget。

Answer 2

您必須在獲取文件后設置狀態您的小部件。 show的返回值被忽略。 （方法show(files: files);沒有附加到 flutter 的小部件樹。）