Flutter - 尝试使用 JSON 数据中给出的文件路径在 Carousel 中显示图像

Question

我正在学习Flutter中的Carousel小部件，我了解了如何直接使用assets文件夹上传图像。

但是，现在我不知道如何使用本地 JSON 文件中存储的文件路径继续在轮播中显示图像。

下面给出的 JSON 文件的片段，其中我想要显示的数据位于“carousel_path”下：

[
  {
    "name": "Desi Vibes",
    "cuisine": "Indian, Mughlai, North Indian",
    "address": "1st Floor, G-50, Maharaja Agrasen Marg, Opposite McDonald's, G Block, Pocket G, Sector 18, Noida, Uttar Pradesh 201301, India",
    "latitude": 28.5701,
    "longitude": 77.3210,
    "rating": 3.0,
    "image_path": "assets/images/desi_vibes.JPG",
    "carousel_path":
    {
      "path1" : "assets/images/desi_vibes/desi1.JPG",
      "path2" : "assets/images/desi_vibes/desi2.JPG",
      "path3" : "assets/images/desi_vibes/desi3.JPG",
      "path4" : "assets/images/desi_vibes/desi-vibes.jpg"
    }
]

以下是我直接从资产加载图像的代码。我想使用 JSON 中存储的文件路径来加载图像。

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

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

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

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

final List<String> imagePaths = [
  "assets/images/concept.jpg",
  "assets/images/lamborghini.jpg",
  "assets/images/mercedes.jpg"
];

late List<Widget> _pages;

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
    _pages = List.generate(
        imagePaths.length,
        (index) => ImagePlaceHolder(
              imagePath: imagePaths[index],
            ));
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          appBar: AppBar(title: const Text('Page View Tutorial')),
          body: Column(
            children: [
              SizedBox(
                width: double.infinity,
                height: MediaQuery.of(context).size.height / 4,
                child: PageView.builder(
                    itemCount: imagePaths.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,
    );
  }
}

我不知道如何继续。任何帮助将不胜感激。

Answer 1

您可以简单地在初始化状态下使用此函数，并在轮播滑块小部件中使用“corousal_path”对象数据

Future<void> _loadImagePaths() async {
  String jsonData = '''
  [
    {
      "name": "Desi Vibes",
      "cuisine": "Indian, Mughlai, North Indian",
      "address": "1st Floor, G-50, Maharaja Agrasen Marg, Opposite McDonald's, G Block, Pocket G, Sector 18, Noida, Uttar Pradesh 201301, India",
      "latitude": 28.5701,
      "longitude": 77.3210,
      "rating": 3.0,
      "image_path": "assets/images/desi_vibes.JPG",
      "carousel_path": {
        "path1" : "assets/images/desi_vibes/desi1.JPG",
        "path2" : "assets/images/desi_vibes/desi2.JPG",
        "path3" : "assets/images/desi_vibes/desi3.JPG",
        "path4" : "assets/images/desi_vibes/desi-vibes.jpg"
      }
    }
  ]
  ''';

  List<dynamic> data = jsonDecode(jsonData);
  var restaurant = data[0];
  var carouselPaths = restaurant['carousel_path'];

  List<String> imagePaths = [];

  carouselPaths.forEach((key, value) {
    imagePaths.add(value);
    _pages.add(ImagePlaceHolder(
            imagePath: value,
          ));
  });

 
}

• 迭代 carouselPaths 地图：

carouselPaths.forEach((key, value) {
     imagePaths.add(value);
     _pages.add(ImagePlaceHolder(
          imagePath: value,
        ));
  });

• “carouselPaths.forEach”迭代“carousel_path”映射中的每个键值对。

• 对于每一对，值是图像路径，它被添加到 使用 imagePaths.add(value) 列出 imagePaths。

• 您可以使用 _pages 添加图像，如下所示：ImagePlaceHolder(imagePath: value)