如何使用我的图像是本地的颤振从 json 文件中解析图像?

Question

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

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

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

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

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

任何帮助将不胜感激！

Answer 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();
}

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

Answer 2

你可以复制粘贴运行下面的完整代码
步骤1：用Payload类解析，可以看到下面的
完整代码

final payload = payloadFromJson(jsonString);

第 2 步：使用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),
), 
);
}
}