如何在非未来中使用未来 class

Question

我是 Flutter 的新手。 我正在尝试解析本地 json 文件（地图列表）以在应用程序的其他部分中使用。

由于它是 json 解析，因此需要 Future function （ getJson() ，在下面的示例中）。 此 function 解析正确，如第 26 行中的“打印”所示。

I/flutter (6478)：第 26 行 [{firstName: John, id: 937206439937}, {firstName: Claudia, id: 8473759437373}, {firstName: Marie-Louise, id: 97745400283}]

我需要在'class _MyHomePageState extends State'中使用这个结果，这不是未来。 我在第 41 行调用 Future，

var myList = decupagemJson();

但是当我尝试打印该值（只是为了检查它是否正确返回）时，我得到了“未来的实例”而不是未来应该返回的值。

I/flutter（6478）：“未来”的第 41 行实例

打印结果

我已经寻找了几个星期的解决方案，但没有一个可以解决这个问题。 如何计算 Future function 中的值，然后在其他非 Future 的类中使用该值？ 到目前为止，我看到的所有答案都是指在另一个 Future 中调用 Future，但我需要在'class _MyHomePageState extends State'中调用 Future 的结果。

我能做些什么？

非常感谢您的帮助。

import 'package:flutter/services.dart' show rootBundle;
import 'dart:convert';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

Future <dynamic> decupagemJson() async {
  var resposta = await rootBundle.loadString('assets/myData.json');
  List dadosExtraidos = json.decode(resposta);

  print('Line 26 $dadosExtraidos'); //just to check if parsing was completed

  return dadosExtraidos;
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {

    var myList = decupagemJson();
    print('Line 41 $myList'); //to check if value returned from Future is correct

    return Scaffold(
      appBar: AppBar(
        title: Text(''),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[],
        ),
      ),
    );
  }
}

Answer 1

• 像这样在构建中进行未来调用是一种不好的做法

• 使用 futureBuilder 代替那个，它会更有效

Answer 2

尝试像这样使用“then”：

decupagemJson().then((value){
    print('Line 41 $value');
});

Answer 3

尝试使用“then”，但在您的语句返回之前不使用，并且在 initState 中使用是：

class _MyHomePageState extends State<MyHomePage> {
  // USE THIS
  @override
  void initState() {
    super.initState();
    decupagemJson().then((value){
      // here you put the desired return, using the VALUE variable, for exemple:
      // myList = value;
    });
  }
  // UNTIL HERE

  @override
  Widget build(BuildContext context) {    
    return Scaffold(
      appBar: AppBar(
        title: Text(''),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[],
        ),
      ),
    );
  }
}

Answer 4

从本地 JSON 获取数据的方式不正确。 因为您需要 model class 才能访问 class 的实例。 按照以下步骤，您将得到答案。

**1：**创建 model class。

class UserModel {
  final id;
  final firstName;

  UserModel({
    this.firstName,
    this.id,
  });

  factory UserModel.fromJson(Map<String, dynamic> json) {
    return UserModel(
      id: json['id'],
      firstName: json['firstName'],
    );
  }
}

**2：**从给定的未来 function 中返回 map 数据的列表，返回类型必须是用户模型列表。

Future<List<UserModel>?> decupagemJson() async {
  var resposta = await rootBundle.loadString('assets/myData.json');
  List dadosExtraidos = json.decode(resposta);
  return dadosExtraidos.map((user) => UserModel.fromJson(user)).toList();
}

**3：**使用FutureBuilder从decupagemJson() function 获取数据，并在FutureBuilder中使用ListView.Builder访问映射数据的 List的索引。 注意FutureBuilder类型必须与我们返回数据的 function 相同。

 FutureBuilder<List<UserModel>?>(
          builder: (con, snap) {
            if (snap.hasData) {
              return ListView.builder(
                itemCount: snap.data!.length,
                itemBuilder: (context, index) {
                  return Container(
                    color: Colors.red,
                    height: 90,
                    child: Column(
                      children: [
                        Text('id :${snap.data![index].id}'),
                        SizedBox(
                          height: 3,
                        ),
                        Text('name :${snap.data![index].firstName}'),
                        SizedBox(
                          height: 10,
                        ),
                      ],
                    ),
                  );
                },
              );
            } else {
              return CircularProgressIndicator();
            }
          },
          future: myList,
        ),

这是完整的代码，只需复制粘贴，谢谢我

import 'package:flutter/services.dart' show rootBundle;
import 'dart:convert';
import 'package:flutter/material.dart';

class UserModel {
  final id;
  final firstName;

  UserModel({
    this.firstName,
    this.id,
  });

  factory UserModel.fromJson(Map<String, dynamic> json) {
    return UserModel(
      id: json['id'],
      firstName: json['firstName'],
    );
  }
}

Future<List<UserModel>?> decupagemJson() async {
  var resposta = await rootBundle.loadString('assets/myData.json');
  List dadosExtraidos = json.decode(resposta);
  return dadosExtraidos.map((user) => UserModel.fromJson(user)).toList();
}

class YourClassName extends StatefulWidget {
  @override
  _YourClassNameState createState() => _YourClassNameState();
}

class _YourClassNameState extends State<YourClassName> {
  late Future<List<UserModel>?> myList;
  @override
  void initState() {
    myList = decupagemJson();
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    //to check if value returned from Future is correct

    return Scaffold(
      appBar: AppBar(
        title: Text(''),
      ),
      body: Center(
        child:
        FutureBuilder<List<UserModel>?>(
          builder: (con, snap) {
            if (snap.hasData) {
              return ListView.builder(
                itemCount: snap.data!.length,
                itemBuilder: (context, index) {
                  return Container(
                    color: Colors.red,
                    height: 90,
                    child: Column(
                      children: [
                        Text('id :${snap.data![index].id}'),
                        SizedBox(
                          height: 3,
                        ),
                        Text('name :${snap.data![index].firstName}'),
                        SizedBox(
                          height: 10,
                        ),
                      ],
                    ),
                  );
                },
              );
            } else {
              return CircularProgressIndicator();
            }
          },
          future: myList,
        ),
      ),
    );
  }
}