Flutter新手求助：ListView中带图片的Container不显示问题排查

可能的原因及解决办法： #

1. Asset资源未正确配置
   Flutter本地图片必须在pubspec.yaml中声明资源路径，否则AssetImage无法加载图片。检查你的pubspec.yaml是否添加了对应配置：

   flutter:
     assets:
       - assets/images/components/shop/donate/
       # 也可以指定单个图片文件
       # - assets/images/components/shop/donate/card1.png
       # - assets/images/components/shop/donate/card2.png
       # - assets/images/components/shop/donate/card3.png
   

   注意缩进用空格（不要用Tab），配置完成后执行flutter pub get或重启IDE生效。

2. ListView的reverse属性导致布局偏移
   代码中设置了reverse: true，这会让ListView从底部开始渲染子组件。你的Column第一个Container会被放在列表最底部，当前屏幕可能看不到，需要向上滑动才能显示。如果不需要反向滚动，直接移除该属性即可。

3. 图片路径错误或文件缺失

   • 核对路径拼写是否完全正确，iOS系统对路径大小写敏感，注意大小写匹配。
   • 确认assets/images/components/shop/donate/目录下确实存在card1.png、card2.png、card3.png文件。

修正后的示例代码 #

class DonatePage extends StatelessWidget {
  const DonatePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        scrollDirection: Axis.vertical,
        // 移除reverse属性，恢复正常滚动顺序
        // reverse: true,
        addAutomaticKeepAlives: false,
        children: [
          Column(
            children: [
              Container(
                width: double.infinity,
                height: 400,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage("assets/images/components/shop/donate/card2.png"),
                    // 添加fit属性确保图片适配容器
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              Text("Campaign of the week"),
              Container(
                width: double.infinity,
                height: 400,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage("assets/images/components/shop/donate/card1.png"),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              Text("for good"),
              Container(
                width: double.infinity,
                height: 400,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage("assets/images/components/shop/donate/card3.png"),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

额外建议：给DecorationImage添加fit: BoxFit.cover（或其他适配值），避免图片因尺寸不匹配导致显示异常。

内容的提问来源于stack exchange，提问作者Uranus_ly