Question

如何将JSON资源加载到我的Flutter应用程序中？

我的pubspec.yaml文件包含以下内容：

  assets:
    - assets/data.json

我一直试图加载数据。我试过了

final json = JSON.decode(
    DefaultAssetBundle.of(context).loadString("assets/data.json")
);

但是我收到了错误

参数类型＆＃39;未来＆lt;串GT;＆＃39;无法分配参数类型＆＃39;字符串＆＃39;。

谢谢！

Answer 1

试试：

String data = await DefaultAssetBundle.of(context).loadString("assets/data.json");
final jsonResult = json.decode(data);

Answer 2

@Alexandre Beaudet的回答是正确的，但并未提供有关正在发生的事情的大量背景信息。

当您调用loadString时，它实际上是异步方法调用。您可以告诉，因为它返回的是Future<value>，而不仅仅是value。这意味着它不会立即产生String的结果，但将来会在某个时候出现。

在Dart中处理异步性有两种主要方式;第一个是使用async和await，第二个是直接使用期货。请参阅dart guide on Asynchronous Programming。

如果直接使用future.then，可以从普通函数（即从initState等）开始。您只需指定回调，并在回调中指定如何处理结果。

void printDailyNewsDigest() {
  final future = gatherNewsReports();
  future.then((news) => print(news));
}

如果您想使用await，如@Alexandre所示，您需要将您正在使用的功能标记为async，即：

Future<Void> printDailyNewsDigest() async {
  String news = await gatherNewsReports();
  print(news);
}

如果覆盖某个功能（即initState），您还需要确保不要更改返回值。大多数时候，这应该被飞镖2打字所吸引，但是无效 - ＆gt;未来似乎不是。

最后要注意的一点是 - 如果您正在使用数据结果来构建小部件，那么您可能希望使用FutureBuilder。

Answer 3

您可以使用此代码：）

loadJson() async {
  String data = await rootBundle.loadString('assets/json/keyboard.json');
  jsonResult = json.decode(data);
  print(jsonResult);
}

可以在开始时加载：）

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) async {
      await loadJson();
    });
  }

需要在资产上添加JSON

flutter:
  uses-material-design: true
  assets:
    - assets/json/keyboard.json

Answer 4

我使用以下内容解析资产中的json：

import 'dart:convert';
import 'package:flutter/services.dart' show rootBundle;
//...
Future<Map<String, dynamic>> parseJsonFromAssets(String assetsPath) async {
    print('--- Parse json from: $assetsPath');
    return rootBundle.loadString(assetsPath)
        .then((jsonStr) => jsonDecode(jsonStr));
  }

使用异步：

parseJsonFromAssets(path)
    .then((dmap) => {
    // here you get json `dmap` as Map<String, dynamic>
    print(dmap);
}));

使用同步：

Map<String, dynamic> dmap = await parseJsonFromAssets('assets/test.json');

如何将JSON资产加载到Flutter App中

4 个答案: