颤动 ||使用文件选择器选择文件并在 listview.builder 中显示它们

Question

创建了一个函数来在 Elevated Button 的 onPressed() 上选择文件，并将文件传递给新函数 openfiles() 然后在打开文件函数中，我调用一个小部件 show() 并将参数传递给它.如何在 listView 中 return。默认构造函数采用显式子列表。此构造函数适用于具有少量子项的列表视图，因为构建列表需要为可能显示在列表视图中的每个子项做工作，而不仅仅是那些实际可见的子项。

pickFileclass

  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

您必须在获取文件后设置状态您的小部件。 return show 的值被忽略。（方法show(files: files); 没有附加到flutter 的widget 树。）

Answer 2

您的 show() 函数正在返回一个小部件，因此您必须将它放在小部件树中的某个位置。

所以首先我会去掉你的 openFiles() 函数，因为它没有真正的用途。然后在你的 _pickFileState class:

中初始化一个 List

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

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

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

最后，当您在 'onPressed' 方法中更改函数时：

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。

颤动 ||使用文件选择器选择文件并在 listview.builder 中显示它们

FLutter || Pick file using file picker and showing them in a listview.builder

android

flutter

flutter-layout

flutter-dependencies

flutter-listview