时间戳

首页 > 解决方案 > 无法在颤动中将json转换为listview

json - 无法在颤动中将json转换为listview

问题描述

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';

class HomePage extends StatefulWidget {
  @override
  HomePageState createState() => HomePageState();
}

class HomePageState extends State<HomePage> {
  List items;

  Future<String> getData() async {
    var response = await http.get(
        'https://api.torn.com/torn/?selections=items&key=7PnSA9HkVB5B6eAK');

    this.setState(() {
      Map items = json.decode(response.body);
      print(items);
    });
  }

  @override
  void initState() {
    this.getData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: items == null ? 0 : items.length,
        itemBuilder: (BuildContext context, int index) {
          return Card(
            child: Text(items[index]['name']),
          );
        },
      ),
    );
  }
}

据我所知，我们可以通过两种形式获取 Json，第一种是 List，第二种是 Map。就我而言，我收到了一张包含我需要的所有数据的地图，但不幸的是我不知道如何正确显示它。从打印我收到数据，但屏幕上没有任何反应。

标签： jsonflutterlistview

解决方案

检查方法中的 setState getData，您正在创建一个新items变量而不是为其分配新值。试试这个。

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class HomePage extends StatefulWidget {
  @override
  HomePageState createState() => HomePageState();
}

class HomePageState extends State<HomePage> {
  Map items = {};
  Future<void> getData() async {
    http.Response res = await http.get(
      "https://api.torn.com/torn/?selections=items&key=7PnSA9HkVB5B6eAK",
    );
    setState(() => items = jsonDecode(res.body)["items"]);
    print(items);
  }

  @override
  void initState() {
    getData();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          index++;
          return Card(
            child: Text(items[index.toString()]["name"] ?? "Empty"),
          );
        },
      ),
    );
  }
}

推荐阅读