json - 如何在 Flutter 的轮播(滑块)中显示 JSON 文件中的图像
问题描述
我有一个本地 json 文件assets/properties.json
,其中键“图像”有 [5 个不同的图像] 与其他键以及名称、地点等一起存储。我希望这些图像显示在 carouselSlider 中。
我已经搜索但找不到特定于我正在尝试做的事情。
import 'package:flutter/material.dart';
import 'package:carousel_pro/carousel_pro.dart';
import 'package:flutter_test_app/test_page.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'dart:convert';
import 'dart:async';
import 'package:flutter_test_app/propery_details_widget.dart';
class PropertyDetails extends StatefulWidget {
@override
_PropertyDetailsState createState() => _PropertyDetailsState();
}
class _PropertyDetailsState extends State<PropertyDetails> {
List properties;
Future<String> loadJsonData() async {
var jsonText = await rootBundle.loadString("assets/properties.json");
setState(() {
properties = json.decode(jsonText);
});
return 'success';
}
int index = 1;
List<String> listaTela = new List();
CarouselSlider instance;
@override
void initState() {
super.initState();
this.loadJsonData();
listaTela.add("assets/images/houses/house.jpg");
listaTela.add('assets/images/houses/house1.jpg');
listaTela.add('assets/images/houses/house2.jpg');
listaTela.add('assets/images/houses/house3.jpg');
listaTela.add('assets/images/houses/house4.jpg');
}
@override
Widget build(BuildContext context) {
instance = new CarouselSlider(
autoPlay: true,
autoPlayDuration: new Duration(seconds: 2),
items: listaTela.map((it) {
return new Container(
width: MediaQuery.of(context).size.width,
// margin: new EdgeInsets.symmetric(horizontal: 5.0),
decoration: new BoxDecoration(
// color: Colors.amber,
),
child: new Image.asset(it),
);
}).toList(),
height: 200,
);
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text("Test App"),
),
body: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Column(
children: <Widget>[
instance,
Flexible(
fit: FlexFit.tight,
child: Container(
child: Details(),
),
)
],
),
),
);
}
}
我不想从像这样的资产中调用图像,而是listaTela.add("assets/images/houses/house.jpg");
想从 JSON 文件中的“图像”键调用它们。在我的旋转木马之外,我可以通过以下方式调用我的图像properties[index]["image"][0],
解决方案
试试这个。(有可能map
不起作用,因为它的类型错误。我认为您没有包含整个 json,因为您通过 索引它index
,但是您没有显示[]
json 周围的指示 json 数组.)
class _PropertyDetailsState extends State<PropertyDetails> {
List properties;
int index = 1;
Future<void> loadJsonData() async {
var jsonText = await rootBundle.loadString("assets/properties.json");
setState(() {
properties = json.decode(jsonText);
});
}
@override
void initState() {
super.initState();
loadJsonData();
}
@override
Widget build(BuildContext context) {
Widget carousel = properties == null
? CircularProgressIndicator()
: CarouselSlider(
items: properties[index]["image"].map((it) {
return new Container(
width: MediaQuery.of(context).size.width,
decoration: new BoxDecoration(),
child: new Image.asset(it),
);
}).toList(),
autoPlay: true,
autoPlayDuration: new Duration(seconds: 2),
height: 200,
);
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text("Test App"),
),
body: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Column(
children: <Widget>[
carousel,
Flexible(
fit: FlexFit.tight,
child: Container(
child: Details(),
),
)
],
),
),
);
}
}
推荐阅读
- sql - 如何获取 PostgreSQL 中每一行在某个周期内的行数?
- python - 模块已安装但导入时找不到
- java - 以编程方式添加组件的样式与 XML 布局中的样式不同
- c++ - c++静态变量在函数性能
- oracle - 更改具有十亿行的分区表中列的数据类型
- java - Java java.lang.ClassCastException: some.package.SomeClass 不能转换为 some.package.SomeClass
- javascript - Mongoose 模式基于条件的单个对象或对象数组
- docker - Docker bench - 如何持久化日志或提供日志文件参数
- python - 具有第一个非缺失值的前向填充行
- android - 从 Firestore 加载的图像与 Picasso 未显示在卡片视图中