Listview。在Flatter中实现时，builder不显示我的图像

Question

我正在尝试实现一个水平列表视图，其中显示了从Flatter image_picker插件中提取的图像。

它的工作正常，如果我不使用列表视图，只显示一个单一的图像。然而，我试图使用多个图像，只要我在列表视图中的小部件只是显示为黑色。我的列表视图代码如下：

          @override
 Widget build(BuildContext context) {
return WillPopScope(

  onWillPop: () async {
    
    Navigator.pushReplacementNamed(context, 'inventory');
    return false;
  },
  child: Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.green[700],
      title: Text(
        'MyApp',
        textAlign: TextAlign.center,
      ),
      leading: new IconButton(
        icon: new Icon(Icons.arrow_back),
        onPressed: () {
          Navigator.pushReplacementNamed(
              context,
              'inventory');
        },
      ),

      actions: <Widget>[
        Padding(
          padding: EdgeInsets.only(right: 10.0),
          child: Container(

            width: 50,
            height: 50,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.white, //remove this when you add image.
            ),

            child: GestureDetector(
              onTap: (){
                Navigator.pushNamed(context,'profile');

              },
              child: Image(
                image:NetworkImage("imageUrl goes here"),
                width: 120,
                height: 120,
                fit: BoxFit.cover,

              ),
            ),
          ),
        )
      ],

    ),
    body: SafeArea(

      child: Column(

        children: [

          pickedFile == null ?
          GestureDetector(
            onTap: () {

              _showMyDialog();

              setState(() {


              });
            },

            child: Container(

              width: 200,
              height: 200,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text('Click to add a Photo',textAlign: 
TextAlign.center,style: TextStyle(fontSize: 24),),
                  SizedBox(height: 20,),
                  Icon(

                    Icons.add_circle_outline,
                    color: Colors.grey[700],
                    size: 30,

                  ),

                ],
              ),
              margin: EdgeInsets.all(20.0),
              decoration: BoxDecoration(

                  border: Border.all(width: 2,color: Colors.grey),

                  shape: BoxShape.circle
              ),

            ),
          )
              :
          GestureDetector(
              onTap: () {

                _showMyDialog();

                setState(() {


                });
              },


              child: ListView.builder(
                  shrinkWrap: true,
                  scrollDirection: Axis.horizontal,
                  itemCount: _imageFileList!.length,
                  itemBuilder: (BuildContext context, int index) {
                   
 return kIsWeb

                        ? Image.network(_imageFileList![index].path)
                        : Image.file(File(_imageFileList! 
  [index].path));

                  }
              )

  ],
      ),

  ),),
  );
  }
}

我没有显示整个代码，因为页面太长，但是页面的其余部分工作正常。如果我删除Listview构建器，而只是使用下面的测试，它就可以正常工作。我做错了什么？

            child: Row(
              children: [
                        kIsWeb
                          ? Container(
                          child: Image.network(_imageFileList![index].path))
                          : Container(
                          child: Image.file(File(_imageFileList![index].path)));

                    }
                ),
              ],
            ),

请帮忙。

**用我的完整部件编辑了上面的代码

Answer 1

设法解决了我的问题。这与需要添加的高度约束有关。在这个链接中找到了解决方案

如何在Flatter中向列添加ListView？

Answer 2

要么使用Row，要么使用ListView，不能两者都使用。

您可以使用带有列表的行。生成：

Row(
  children: List.generate(_imageFileList!.length, 
    (i) => kIsWeb
         ? Container(child: Image.network(_imageFileList![index].path))
         : Container(child: Image.file(File(_imageFileList![index].path))
),

或者ListView在没有行的情况下如何使用它ListView可能是您想要使用的小部件<如果内容大于宽度，则代码>行将溢出，而在这种情况下，列表视图将充当其自己的滚动视图。

我还要再次检查您是否需要扩展的小部件。这通常用于一行（或类似的小部件）中。