Question

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

如果我不使用 Listview 并且只显示单个图像，它就可以正常工作。但是我正在尝试使用多个图像，一旦我将其放置在 Listview 中，小部件就会显示为黑色。我的 Listview 代码如下：

          @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

使用 Row 或使用 ListView，不要同时使用。

您可以将 Row 与 List.generate 一起使用：

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

或者 ListView 就是没有 Row 的情况。 ListView 可能是您想要使用的小部件。如果内容大于宽度，Row 将溢出，而在这种情况下 ListView 将充当其自己的 ScrollView。

我还要仔细检查您是否需要该 Expanded 小部件。这通常用于 inside Row（或类似的小部件）。

Answer 2

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

How to add a ListView to a Column in Flutter?

在 Flutter 中实现时 Listview.builder 不显示我的图像

2 个答案: