如何在Flutter中的转盘(滑块)中显示JSON文件中的图像 [英] How do I display images from a JSON file in a carousel(slider) in Flutter

问题描述

我有一个本地json文件assets/properties.json，其中的键图像"已与其他键(例如名称，位置)一起存储了[5个不同的图像].我希望将此图像显示在carouselSlider中.

I have a local json file assets/properties.json in which key "image" has [5 different images] stored with other keys as well like name, place, etc. I want this images be displayed in a carouselSlider.

我进行了搜索，但找不到与我要执行的操作有关的特定内容.

I have searched but cant find something specific to what i am trying to do.

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文件中的"image"键调用它们.在轮播之外，我可以通过properties[index]["image"][0],

Instead of calling images from assests listaTela.add("assets/images/houses/house.jpg"); like this i want to call them from my "image" key in JSON file. outside my Carousel i can call my images by properties[index]["image"][0],

推荐答案

尝试一下. (map可能会因为它的类型错误而无法工作.我不认为您包含了整个json，因为您正在使用index对其进行索引，但是您并未显示[]表示json数组的json周围.)

Try this. (There's a chance that the map won't work because it will have the wrong type. I don't think you included the whole json, as you are indexing it by index, yet you don't show a [] surrounding the json indicating a json array.)

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

这篇关于如何在Flutter中的转盘(滑块)中显示JSON文件中的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！