我有一个本地json文件assets/properties.json
,其中的键“图像”已与其他键(例如名称,位置)一起存储了[5个不同的图像]。我希望将此图像显示在carouselSlider中。 / p>
我已经搜索过,但找不到与我要执行的操作有关的特定内容。
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],
答案 0 :(得分:1)
尝试一下。 (map
有可能因为它的类型错误而无法工作。我不认为您包含了整个json,因为您正在用index
对其进行索引,但是您没有这样做) t在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(),
),
)
],
),
),
);
}
}
答案 1 :(得分:0)
据我了解您的问题,有两个挑战。
JSON和Dart
需要一些习惯来构建package:built_value
是一个不错的方法。它将允许您从JSON文件映射Dart对象或对象列表。或者,如果您想简化一点,可以执行此处描述的操作:https://flutter.dev/docs/development/data-and-backend/json#serializing-json-manually-using-dartconvert
来自索引并更新的图像
基本上,您要在initState
中进行的操作是:
load image data from json -> set start index -> somehow get Flutter to map N image paths to Image widgets and update tree
像initState
这样的伪代码可能看起来像这样:
void initState() {
super.initState();
// step 1: load json and map it to Dart objects
this.loadFromJson().then(() {
// loadFromJson returns with a Future, `then` allows you to do computation after it returns
setState(() {
// setting property in setState tells Flutter: hey buddy, stuff happened, rebuild!
this.startIndex = 0;
});
});
}
在您的内部版本中:
// [...]
CarouselSlider(
items: listaTela.skip(this.startIndex).take(5).map((imgObj) => Image.asset(imgObj.assetPath))
);
希望我了解您的问题,并给了您相关的答案。