图像未显示在 GridView Flutter 中

Question

我正在尝试在我的应用程序中添加多图像 selection，我没有从代码中收到任何错误，但图像不会显示在 GridView 中。当我单击 select 图像按钮时，它会将我带回页面，然后当我输入 Description TextFormField 时，我得到一个黑色和黄色的条，表示底部溢出了 36 个像素，我使用了应用程序的 image_picker 包。

图片Select代码（statefull内部class）：

final ImagePicker _picker = ImagePicker();
final List<XFile> _imageList = [];

void imageSelect() async {
 final XFile? selectedImage =
    await _picker.pickImage(source: ImageSource.gallery);
 if (selectedImage!.path.isEmpty) {
  _imageList.add(selectedImage);
 }
 setState(() {});
}

图像的网格视图：

 Expanded(
        child: GridView.builder(
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3),
            itemCount: _imageList.length,
            itemBuilder: (BuildContext context, int index) {
              return Image.file(File(_imageList[index].path),
                  width: 20, height: 20);
            }),
      )

调试控制台：

The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a 
yellow and black striped pattern. This is usually caused by the contents being too big 
for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of 
the RenderFlex to fit within the available space instead of being sized to their natural 
size.
This is considered an error condition because it indicates that there is content that 
cannot be seen. If the content is legitimately bigger than the available space, consider 
clipping it with a ClipRect widget before putting it in the flex, or using a scrollable 
container rather than a Flex, like a ListView.

The specific RenderFlex in question is: RenderFlex#1b4ea relayoutBoundary=up2 
OVERFLOWING
════════════════════════════════════════════════════════════════════════════════
I/ample.learn_ap(15419): Background concurrent copying GC freed 7381(374KB) AllocSpace 
objects, 1(20KB) LOS objects, 54% free, 1264KB/2MB, paused 16.731ms total 410.005ms
Reloaded 1 of 580 libraries in 7 065ms.
D/EGL_emulation(15419): eglMakeCurrent: 0xde785b40: ver 2 0 (tinfo 0xde783f70)
2
D/EGL_emulation(15419): eglMakeCurrent: 0xe4b45500: ver 2 0 (tinfo 0xc9dfeef0)
D/EGL_emulation(15419): eglMakeCurrent: 0xde785b40: ver 2 0 (tinfo 0xde783f70)

════════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 36 pixels on the bottom.

The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a 
yellow and black striped pattern. This is usually caused by the contents being too big 
for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of 
the RenderFlex to fit within the available space instead of being sized to their natural 
size.
 This is considered an error condition because it indicates that there is content that 
cannot be seen. If the content is legitimately bigger than the available space, consider 
clipping it with a ClipRect widget before putting it in the flex, or using a scrollable 
container rather than a Flex, like a ListView.

The specific RenderFlex in question is: RenderFlex#1b4ea relayoutBoundary=up2 
OVERFLOWING
════════════════════════════════════════════════════════════════════════════════
D/EGL_emulation(15419): eglMakeCurrent: 0xde785b40: ver 2 0 (tinfo 0xde783f70)
2
D/EGL_emulation(15419): eglMakeCurrent: 0xe4b45500: ver 2 0 (tinfo 0xc9dfeef0)
2
D/EGL_emulation(15419): eglMakeCurrent: 0xde785b40: ver 2 0 (tinfo 0xde783f70)
I/ample.learn_ap(15419): IncrementDisableThreadFlip blocked for 22.032ms
I/ample.learn_ap(15419): Background concurrent copying GC freed 28331(1175KB) AllocSpace 
objects, 5(228KB) LOS objects, 50% free, 1519KB/2MB, paused 22.899ms total 351.693ms
2
D/EGL_emulation(15419): eglMakeCurrent: 0xe4b45500: ver 2 0 (tinfo 0xc9dfeef0)
D/EGL_emulation(15419): eglMakeCurrent: 0xde785b40: ver 2 0 (tinfo 0xde783f70)
I/Choreographer(15419): Skipped 34 frames!  The application may be doing too much work 
on its main thread.

Answer 1

尝试在 GridView

中使用 shrinkWrap: true 标志

Answer 2

找到解决方案，修改：

if (selectedImage!.path.isEmpty) {_imageList.add(selectedImage);}

至：

if (selectedImage!.path.isNotEmpty) {_imageList.addAll(selectedImage);}.

新更新图片Select代码：

//Image Selection
final ImagePicker _picker = ImagePicker();
List<XFile>? _imageList = [];

void imageSelect() async {
final List<XFile>? selectedImages = await _picker.pickMultiImage();
if (selectedImages!.isNotEmpty) {
  _imageList!.addAll(selectedImages);
}
setState(() {});
}

然后我做了一个水平滚动的ListView：

 Container(
          child: SingleChildScrollView(
              child: Column(
        children: [
          SizedBox(
              height: 140,
              child: ListView.builder(
                  itemCount: _imageList!.length,
                  scrollDirection: Axis.horizontal,
                  itemBuilder: (context, index) => Container(
                        height: 140,
                        width: 140,
                        margin: EdgeInsets.all(10),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(8),
                          child: Stack(
                            fit: StackFit.expand,
                            children: [
                              Image.file(File(_imageList![index].path),
                                  fit: BoxFit.cover),
                              Positioned(
                                right: 4,
                                top: 5,
                                child: Container(
                                    color:
                                        Color.fromRGBO(255, 255, 244, 0.3),
                                    child: IconButton(
                                        onPressed: () {
                                          //Deletes images from list and ListView
                                          _imageList!.removeAt(index);
                                          setState(() {});
                                        },
                                        icon: Icon(Icons.delete),
                                        color: Colors.red[800])),
                              )
                            ],
                          ),
                        ),
                      )))
        ],
      ))),

图像未显示在 GridView Flutter 中

Images not showing up in GridView Flutter

dart

dart-pub

flutter

flutter-dependencies

flutter-layout