如何在 Flutter 中使用 FutureProvider 解析嵌套的 json

Question

我正在尝试在我的应用程序中解析嵌套的 JSON 文档。 JSON 结构如下所示：

[
{
    "id": 1,
    "content": [
        {
            "type": "text",
            "value": "This is a Text1"
        },
        {
            "type": "latex",
            "value": "\frac00"
        },
        {
            "type": "text",
            "value": "This is a Text2"
        },
        {
            "type": "latex",
            "value": "\frac00"
        },
        {
            "type": "text",
            "value": "This is a Text3"
        }
    ]
},
{
    "id": 2,
    "content": [
        {
            "type": "text",
            "value": "This is a Text"
        }
    ]
}

] 这是我的模型类：

class Tutorial {
  String id;
  List<Content> content;

  Tutorial({this.id, this.content});

  Tutorial.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    if (json['content'] != null) {
      content = new List<Content>();
      json['content'].forEach((v) {
        content.add(new Content.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    if (this.content != null) {
      data['content'] = this.content.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

class Content {
  String type;
  String value;

  Content({this.type, this.value});

  Content.fromJson(Map<String, dynamic> json) {
    type = json['type'];
    value = json['value'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['type'] = this.type;
    data['value'] = this.value;
    return data;
  }
}

这就是我检索该 Json 并制作响应对象的方式：

import 'package:Mathzi/pages/courses/models/tutorialModel.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'dart:async' show Future;
import 'dart:convert' as convert;

class TutorialService {
  Future<List> fetchTutorial() async {
    var response = await rootBundle.loadString('assets/tutorial.json');
    final jsonResponse = convert.jsonDecode(response) as List;
    return jsonResponse.map((tutorial) => Tutorial.fromJson(tutorial)).toList();
  }
}

这是我的屏幕小部件树：

  final TutorialService tutorialService = TutorialService();

  @override
  Widget build(BuildContext context) {
    return FutureProvider(
      create: (context) => tutorialService.fetchTutorial(),
      catchError: (context, error) => print(error.toString()),
      child: SizeTransition(
        axis: Axis.vertical,
        sizeFactor: animation,
        child: GestureDetector(
          //behavior: HitTestBehavior.opaque,
          onTap: onTap,
          child: SizedBox(
              height: 50.0,
              width: MediaQuery.of(context).size.width,
              child: TutParagraph()
              ),
        ),
      ),
    );
  }

还有我的 TutParagraph.dart：

import 'package:Mathzi/pages/courses/models/tutorialModel.dart';
import 'package:catex/catex.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import 'models/tutorialModel.dart';

class TutParagraph extends StatelessWidget {
  const TutParagraph({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List<Content> parag = Provider.of<List<Content>>(context);
    return (parag == null)
        ? Center(child: CircularProgressIndicator())
        : ListView.builder(
            itemCount: parag.length,
            itemBuilder: (context, index) {
              if (parag[index].type.toString() == "text")
                return Text(parag[index].value.toString());
              else if (parag[index].type.toString() == "latex")
                return CaTeX(parag[index].value.toString());
              else
                return null;
            },
          );
  }
}

如果类型等于 text 我使用 Text() 小部件来显示它，如果是 latex 我使用 CaTex()

当我运行我的代码时，它给了我这个错误信息：

错误：

在此上方找不到正确的 Provider TutParagraph 小部件

要修复，请：

• 确保 Provider 是它的祖先 TutParagraph Widget * 向 Provider 提供类型 * 提供类型给消费者 * 提供类型给 Provider.of() * 确保正确的context 正在 用过。

Answer 1

最好的解决方案是尝试强制转换并明确告知 List 使用的对象类型以避免此类问题，而不是让它推断它

class TutorialService {
  Future<List<Tutorial>> fetchTutorial() async {  //Tell the trturn type of the List
    var response = await rootBundle.loadString('assets/tutorial.json');
    final jsonResponse = convert.jsonDecode(response) as List;
    return jsonResponse.map<Tutorial>((tutorial) => Tutorial.fromJson(tutorial)).toList();
    //Cast the type in the map method <Tutorial>
  }
}

再次在 FutureProvider 中

FutureProvider<List<Tutorial>>( //perhaps it can infere it correctly now that the return type explicitly says is a List<Tutorial>, but lets add it anyway just in case
   create: (context) => tutorialService.fetchTutorial(),
   catchError: (context, error) => print(error.toString()),
   child: ...
)

在 TutParagraph 中

class TutParagraph extends StatelessWidget {
  const TutParagraph({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List<Tutorial> tutorial = Provider.of<List<Tutorial>>(context); //it should find the FutureProvider
    List<Content> parag = (tutorial?.isEmpty ?? true) ? null : tutorial[0].content; //but this will only give you the list of the first element of the tutorial List
    return (parag == null)
        ? Center(child: CircularProgressIndicator())
        : ListView.builder(
            itemCount: parag.length,
            itemBuilder: (context, index) {
              if (parag[index].type.toString() == "text")
                return Text(parag[index].value.toString());
              else if (parag[index].type.toString() == "latex")
                return CaTeX(parag[index].value.toString());
              else
                return null;
            },
          );
  }
}

现在，如果您只想检索 List<Content>，您应该尝试更改 tutorialService.fetchTutorial() 的逻辑以仅返回该类型的列表，因为 Provider 不知道 Tutorial 中的类型，显然如果您有一个List<Tutorial> 它不知道你真正想要的教程列表的索引的List<Content>