如何使用我的图像在本地的颤振解析 json 文件中的图像？

Posted 2023-02-23

【中文标题】如何使用我的图像在本地的颤振解析 json 文件中的图像？

【英文标题】：How do I parse images from a json file using flutter in which my images are local?

【发布时间】：2020-05-15 14:16:12

【问题描述】：

我目前正在将我的图像硬编码在一个包含如下 imageUrl 的列表中：

final slideList = [
  Slide(imageUrl: 'assets/images/dog1.jpeg'),
  Slide(imageUrl: 'assets/images/dog2.jpeg'),
  Slide(imageUrl: 'assets/images/dog3.jpeg')
];

我有一个 assets 文件夹，其中嵌套了一个 images 文件夹，还有一个 json 文件。我正在尝试弄清楚如何解析 json，这样我就可以避免对将来在所述列表中的每一个图像进行硬编码。 json 文件如下所示：

[
  
    "images": [
        "assets/images/dog1.jpeg",
        "assets/images/dog2.jpeg",
        "assets/images/dog3.jpeg"
    ]
  
]

我使用的图像位于我的图像文件夹中，因此我没有使用 api 从网络上获取图像。我希望能够解析 json 文件并将图像存储在上述代码 sn-p 的列表中，而不是硬编码 100 个不同的 imageUrl。

任何帮助将不胜感激！

【问题讨论】：

你能展示一下你的 Slide 类的样子吗？？

【参考方案1】：

假设您使用上面给出的 json，您的 Slide 类将如下所示

class Slide 
  String imageUrl;

  Slide(this.imageUrl);

  factory Slide.fromJson(dynamic json) 
    return Slide(json['Image'] as String);
  

  @override
  String toString() 
    return ' $this.imageUrl ';
  

因此，要将 json 解析为幻灯片对象，您可以使用以下代码将 JSON 对象映射到 Slide 对象

void main() 
  String jsonString = '["Image":"assets/images/dog1.jpeg","Image":"assets/images/dog2.jpeg","Image":"assets/images/dog3.jpeg"]';

  var mySlideJson = jsonDecode(jsonString) as List;

  List<Slide> slideObjs = mySlideJson.map((slideJson) => Slide.fromJson(slideJson)).toList();

希望这有助于您实现目标。

【参考方案2】：

您可以在下面复制粘贴运行完整代码 第一步：使用Payload类解析，完整代码如下

final payload = payloadFromJson(jsonString);

第二步：使用List<Slide>.generate

 var slideList = new List<Slide>.generate(3, (i) 
      return Slide(
        imageUrl: payload[0].images[i],
      );
    );

输出

I/flutter (10200): assets/images/dog1.jpeg
I/flutter (10200): assets/images/dog2.jpeg
I/flutter (10200): assets/images/dog3.jpeg
I/flutter (10200): [Instance of 'Slide', Instance of 'Slide', Instance of 'Slide']
I/flutter (10200): assets/images/dog1.jpeg
I/flutter (10200): assets/images/dog2.jpeg
I/flutter (10200): assets/images/dog3.jpeg

完整代码

import 'package:flutter/material.dart';
// To parse this JSON data, do
//
//     final payload = payloadFromJson(jsonString);

import 'dart:convert';

List<Payload> payloadFromJson(String str) => List<Payload>.from(json.decode(str).map((x) => Payload.fromJson(x)));

String payloadToJson(List<Payload> data) => json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class Payload 
  List<String> images;

  Payload(
    this.images,
  );

  factory Payload.fromJson(Map<String, dynamic> json) => Payload(
    images: List<String>.from(json["images"].map((x) => x)),
  );

  Map<String, dynamic> toJson() => 
    "images": List<dynamic>.from(images.map((x) => x)),
  ;



class Slide 
  final String imageUrl;

  Slide(this.imageUrl);


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

class MyApp extends StatelessWidget  
  @override
  Widget build(BuildContext context) 
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(        
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  


class MyHomePage extends StatefulWidget 
  MyHomePage(Key key, this.title) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();


class _MyHomePageState extends State<MyHomePage> 
  int _counter = 0;
  String jsonString = '''
  [
  
    "images": [
        "assets/images/dog1.jpeg",
        "assets/images/dog2.jpeg",
        "assets/images/dog3.jpeg"
    ]
  
]
  ''';

  void _incrementCounter() 
    final payload = payloadFromJson(jsonString);
    print( payload[0].images[0] );
    print( payload[0].images[1] );
    print( payload[0].images[2] );

    var slideList = new List<Slide>.generate(3, (i) 
      return Slide(
        imageUrl: payload[0].images[i],
      );
    );

    print(slideList.toString());
    print(slideList[0].imageUrl);
    print(slideList[1].imageUrl);
    print(slideList[2].imageUrl);
    setState(()     
      _counter++;
    );
  

  @override
  Widget build(BuildContext context)     
    return Scaffold(
      appBar: AppBar(        
        title: Text(widget.title),
      ),
      body: Center(        
        child: Column(          
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), 
    );