Flutter技术求助：如何利用本地JSON路径在Carousel展示图片

步骤1：配置资源文件 #

首先确保你的JSON文件和图片资源已正确配置在pubspec.yaml中：

flutter:
  assets:
    - assets/images/
    - assets/data/restaurants.json  # 假设JSON文件放在这个路径

步骤2：创建JSON数据模型类 #

为了方便解析JSON结构，定义对应的数据模型：

class Restaurant {
  final String name;
  final Map<String, String> carouselPaths;

  Restaurant({required this.name, required this.carouselPaths});

  // 从JSON映射到模型
  factory Restaurant.fromJson(Map<String, dynamic> json) {
    return Restaurant(
      name: json['name'],
      carouselPaths: Map<String, String>.from(json['carousel_path']),
    );
  }
}

步骤3：异步加载并解析JSON #

在页面的State类中添加异步方法，读取JSON文件并提取轮播图路径：

import 'dart:convert';
import 'package:flutter/services.dart';

late List<Widget> _pages;
late List<String> _carouselImagePaths;

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    _carouselImagePaths = [];
    _pages = [];
    _loadCarouselPaths();
  }

  Future<void> _loadCarouselPaths() async {
    try {
      // 加载本地JSON文件
      String jsonString = await rootBundle.loadString('assets/data/restaurants.json');
      List<dynamic> jsonList = jsonDecode(jsonString);
      
      // 解析第一个餐厅的轮播图路径
      Restaurant restaurant = Restaurant.fromJson(jsonList[0]);
      setState(() {
        // 将Map中的路径值转为列表
        _carouselImagePaths = restaurant.carouselPaths.values.toList();
        // 生成轮播页面组件
        _pages = _carouselImagePaths.map((path) => ImagePlaceHolder(imagePath: path)).toList();
      });
    } catch (e) {
      print('JSON加载失败: $e');
    }
  }

步骤4：修改UI处理加载状态 #

因为JSON加载是异步操作，需要在UI中处理加载中和加载完成的状态：

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Page View Tutorial')),
        body: Column(
          children: [
            // 加载中显示进度指示器
            _carouselImagePaths.isEmpty
                ? SizedBox(
                    height: MediaQuery.of(context).size.height / 4,
                    child: const Center(child: CircularProgressIndicator()),
                  )
                : SizedBox(
                    width: double.infinity,
                    height: MediaQuery.of(context).size.height / 4,
                    child: PageView.builder(
                      itemCount: _carouselImagePaths.length,
                      itemBuilder: (context, index) {
                        return _pages[index];
                      },
                    ),
                  ),
          ],
        ),
      ),
    );
  }
}

步骤5：优化图片加载容错 #

给ImagePlaceHolder添加错误处理，避免图片加载失败导致崩溃：

class ImagePlaceHolder extends StatelessWidget {
  final String? imagePath;

  const ImagePlaceHolder({super.key, this.imagePath});

  @override
  Widget build(BuildContext context) {
    return Image.asset(
      imagePath!,
      fit: BoxFit.cover,
      // 图片加载失败时显示错误图标
      errorBuilder: (context, error, stackTrace) {
        return const Center(child: Icon(Icons.error, color: Colors.red));
      },
    );
  }
}

完整代码整合 #

把以上部分组合起来，就是完整的可运行代码，注意导入所有必要的包：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());

class Restaurant {
  final String name;
  final Map<String, String> carouselPaths;

  Restaurant({required this.name, required this.carouselPaths});

  factory Restaurant.fromJson(Map<String, dynamic> json) {
    return Restaurant(
      name: json['name'],
      carouselPaths: Map<String, String>.from(json['carousel_path']),
    );
  }
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

late List<Widget> _pages;
late List<String> _carouselImagePaths;

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    _carouselImagePaths = [];
    _pages = [];
    _loadCarouselPaths();
  }

  Future<void> _loadCarouselPaths() async {
    try {
      String jsonString = await rootBundle.loadString('assets/data/restaurants.json');
      List<dynamic> jsonList = jsonDecode(jsonString);
      Restaurant restaurant = Restaurant.fromJson(jsonList[0]);
      setState(() {
        _carouselImagePaths = restaurant.carouselPaths.values.toList();
        _pages = _carouselImagePaths.map((path) => ImagePlaceHolder(imagePath: path)).toList();
      });
    } catch (e) {
      print('JSON加载失败: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Page View Tutorial')),
        body: Column(
          children: [
            _carouselImagePaths.isEmpty
                ? SizedBox(
                    height: MediaQuery.of(context).size.height / 4,
                    child: const Center(child: CircularProgressIndicator()),
                  )
                : SizedBox(
                    width: double.infinity,
                    height: MediaQuery.of(context).size.height / 4,
                    child: PageView.builder(
                      itemCount: _carouselImagePaths.length,
                      itemBuilder: (context, index) {
                        return _pages[index];
                      },
                    ),
                  ),
          ],
        ),
      ),
    );
  }
}

class ImagePlaceHolder extends StatelessWidget {
  final String? imagePath;

  const ImagePlaceHolder({super.key, this.imagePath});

  @override
  Widget build(BuildContext context) {
    return Image.asset(
      imagePath!,
      fit: BoxFit.cover,
      errorBuilder: (context, error, stackTrace) {
        return const Center(child: Icon(Icons.error, color: Colors.red));
      },
    );
  }
}

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