Flutter PageView中图片无法显示问题求助

创建横向滚动的PageView用于展示树木图片及对应标题，标题可正常显示，但树木图片无法在屏幕上呈现。已定义包含id、title和path的TreeModel类，通过AssetImage组件使用路径加载图片，背景图landscape1.jpg能正常显示，但树木图片加载失败。

TreeModel代码 #

class TreeModel {
  final int id;
  final String title;
  final String path;

  TreeModel(this.id, this.title, this.path);
}

List<TreeModel> treeModelList = [
  TreeModel(1, 'Tree 1', 'images/tree_illust.png'),
  TreeModel(2, 'Tree 2', 'images/tree_illust2.png'),
  TreeModel(3, 'Tree 3', 'images/tree_illust3.png'),
  TreeModel(4, 'Tree 4', 'images/tree_illust4.png'),
];

TreeDesignPage代码 #

import 'package:app/models/tree_model.dart';
import 'package:flutter/material.dart';

class TreeDesignPage extends StatefulWidget {
  const TreeDesignPage({Key? key}) : super(key: key);

  @override
  State<TreeDesignPage> createState() => _TreeDesignPageState();
}

class _TreeDesignPageState extends State<TreeDesignPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        constraints: const BoxConstraints.expand(),
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage('images/landscape1.jpg'), // 背景图正常显示
            fit: BoxFit.cover,
          ),
        ),
        child: PageView.builder(
          itemCount: treeModelList.length,
          itemBuilder: (context, index) {
            return Stack(
              children: [
                InkWell(
                  onTap: () {
                    print("Clicked ${treeModelList[index].id}!");
                  },
                  child: Container(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: AssetImage(treeModelList[index].path), // 此处图片无法加载
                      ),
                    ),
                  ),
                ),
                Positioned(
                  left: 113.7,
                  top: 70,
                  child: SizedBox(
                    width: 184,
                    child: Text(
                      treeModelList[index].title,
                      textAlign: TextAlign.center,
                      style: const TextStyle(fontSize: 40),
                    ),
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

文件结构 #

- lib/
  - models/
    - tree_model.dart
  - tree_design_page.dart
- images/
  - landscape1.jpg
  - tree_illust.png
  - tree_illust2.png
  - tree_illust3.png
  - tree_illust4.png
- pubspec.yaml

排查与解决建议 #

• 检查pubspec.yaml资源配置
  确保assets配置缩进正确（YAML要求2个空格缩进，禁止用tab），示例配置如下：

  flutter:
    assets:
      - images/
      - images/tree_illust.png
      - images/tree_illust2.png
      - images/tree_illust3.png
      - images/tree_illust4.png
      - images/landscape1.jpg
  

  配置完成后需重启应用，热重载无法加载新配置的资源。

• 修复Container尺寸问题
  当前包裹图片的Container未设置尺寸，导致图片无绘制空间。可添加尺寸约束并设置图片适配方式：

  child: Container(
    width: MediaQuery.of(context).size.width,
    height: MediaQuery.of(context).size.height,
    decoration: BoxDecoration(
      image: DecorationImage(
        image: AssetImage(treeModelList[index].path),
        fit: BoxFit.cover, // 让图片填充容器
      ),
    ),
  ),
  

• 验证路径与文件名大小写
  Flutter的AssetImage对路径大小写敏感，需确保代码中的路径与实际文件名完全一致（如tree_illust.png与Tree_Illust.png视为不同路径）。

• 清理缓存并重启
  执行以下命令清理缓存后重启应用：

  flutter clean
  flutter pub get
  

• 单独测试图片加载
  在PageView外添加Image.asset('images/tree_illust.png')，验证单张图片是否能正常加载，排除路径或资源打包问题。

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