Flutter從API獲取加密資料

我的代碼中沒有顯示錯誤。我不明白為什么 ListView.builder 下的加密資產名稱串列沒有顯示在我的應用程式螢屏上？

我在“Hello World”頁面中看到的只是一個空串列。

我的代碼是從本教程修改的： https ://github.com/toxicOxygen/fetching_data_from_api/tree/master/lib

import 'package:flutter/material.dart';
import '../models/asset.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import '../widgets/searchPage.dart';

class AddAssetScreen extends StatefulWidget {
  @override
  _AddAssetScreenState createState() => _AddAssetScreenState();
}

class _AddAssetScreenState extends State<AddAssetScreen> {
  List<Asset> _assets = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Hello World'),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              Navigator.of(context).push(MaterialPageRoute(
                  builder: (ctx) => SearchPage(
                        assets: _assets,
                      )));
            },
          )
        ],
      ),
      body: FutureBuilder(
        future: _getData(),
        builder: (ctx, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting)
            return CircularProgressIndicator();
          return ListView.builder(
            itemBuilder: (ctx, i) {
              return Column(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  ListTile(
                    title: Text(_assets[i].name!),
                  ),
                  Divider(
                    height: 0,
                  )
                ],
              );
            },
            itemCount: _assets.length,
          );
        },
      ),
    );
  }

  Future<void> _getData() async {
    var url =
        'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false';
    http.get(Uri.parse(url)).then((data) {
      return json.decode(data.body);
    }).then((data) {
      for (var json in data) {
        _assets.add(Asset.fromJson(json));
      }
    }).catchError((e) {
      print(e);
    });
  }
}

資產模型代碼如下：

class Asset {
  String? id;
  String? name;
  String? image;
  double? currentPrice;
  double? priceChange24h;
  double? priceChangePercentage24h;

  Asset({
    required this.id,
    required this.name,
    required this.image,
    required this.currentPrice,
    required this.priceChange24h,
    required this.priceChangePercentage24h,
  });

  Asset.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    name = json['name'];
    image = json['image'];
    currentPrice = json['current_price'];
    priceChange24h = json['price_change_24h'];
    priceChangePercentage24h = json['price_change_percentage_24h'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['name'] = this.name;
    data['image'] = this.image;
    data['current_price'] = this.currentPrice;
    data['price_change_24h'] = this.priceChange24h;
    data['price_change_percentage_24h'] = this.priceChangePercentage24h;
    return data;
  }
}

uj5u.com熱心網友回復：

_getData 需要回傳 void 以外的其他內容，例如 List。

標籤：扑api列表显示加密货币列表瓦片

上一篇：如何避免使用FutureBuilder，因為它在setState中復制專案

下一篇：2個串列視圖之間的資料系結選擇/取消選擇記錄