Flutter：如何在json檔案中加入或鏈接兩個類

在一個 json 檔案中，有兩個類，即食物和指令。在第一頁中，將顯示帶有鏈接的食物名稱串列。點擊食物名稱，會進入第二頁，顯示與食物相關的說明內容。這里的食物 -> 擊球手 -> 擊球手 id 等于指令 -> 類別

所以我的問題是我如何在顫振中實際做或編碼它？
下面是json檔案的示例：

{
 "food": [
    {
        "id": "0001",
        "name": "Cake",
        "batters":
            {
                "batter":
                    [ { "id": "instruction_1002", "type": "Chocolate" } ]
            }
    },
    {
        "id": "0002",
        "name": "Raised",
        "batters":
            {
                "batter":
                    [ { "id": "instruction_1003", "type": "Blueberry" } ]
            }
    }
],
"instruction": [
    {
        "category": "instruction_1002",
        "content": "abc1234"
      },
      {
        "category": "instruction_1003",
        "content": "def56789"
      }
  ]
}

以下是示例圖片：

uj5u.com熱心網友回復：

看起來你的后端沒有給你這兩個之間的關系，所以由你來封裝它們并自己做關系，最簡單的方法是你有一個 Response 物件來解碼你的 json：

class Response {
    Response({
        required this.food,
        required this.instruction,
    });

    final List<Food> food;
    final List<Instruction> instruction;

    factory Response.fromJson(Map<String, dynamic> json) => Response(
        food: List<Food>.from(json["food"].map((x) => Food.fromJson(x))),
        instruction: List<Instruction>.from(json["instruction"].map((x) => Instruction.fromJson(x))),
    );

    Map<String, dynamic> toJson() => {
        "food": List<dynamic>.from(food.map((x) => x.toJson())),
        "instruction": List<dynamic>.from(instruction.map((x) => x.toJson())),
    };
}

class FoodResponse {
    FoodResponse({
        required this.id,
        required this.name,
        required this.batters,
    });

    final String id;
    final String name;
    final Batters batters;

    factory FoodResponse.fromJson(Map<String, dynamic> json) => FoodResponse(
        id: json["id"],
        name: json["name"],
        batters: Batters.fromJson(json["batters"]),
    );

    Map<String, dynamic> toJson() => {
        "id": id,
        "name": name,
        "batters": batters.toJson(),
    };
}

class BattersResponse {
    BattersResponse({required this.batter});

    final List<Batter> batter;

    factory BattersResponse.fromJson(Map<String, dynamic> json) => BattersResponse(
        batter: List<Batter>.from(json["batter"].map((x) => Batter.fromJson(x))),
    );

    Map<String, dynamic> toJson() => {
        "batter": List<dynamic>.from(batter.map((x) => x.toJson())),
    };
}

class BatterResponse {
    BatterResponse({
        required this.id,
        required this.type,
    });

    final String id;
    final String type;

    factory BatterResponse.fromJson(Map<String, dynamic> json) => BatterResponse(
        id: json["id"],
        type: json["type"],
    );

    Map<String, dynamic> toJson() => {
        "id": id,
        "type": type,
    };
}

class InstructionResponse {
    InstructionResponse({
        required this.category,
        required this.content,
    });

    final String category;
    final String content;

    factory InstructionResponse.fromJson(Map<String, dynamic> json) => InstructionResponse(
        category: json["category"],
        content: json["content"],
    );

    Map<String, dynamic> toJson() => {
        "category": category,
        "content": content,
    };
}

現在您只需要從回應物件決議到您的域（您真正想要的）

class Model {
    final List<Food> food;

    const Model({this.food = const <Food>[]});

    factory Model.fromResponse(Response response) {
        final foodList = response.food.toList();
        final instructionsResponse = response.instruction.toList();
        final List<Food> items = [];
        for (int f = 0; f < foodList.length; f  ) {
           final List<Instruction> instructions = [];
           final food = foodList[f];
           food.batters.batter.forEach((b) {
              for (int i = 0; i < instructionsResponse.length; i  ) {
                 final singleInstruction = instructionsResponse[i];
                 if (singleInstruction.category == b.id) {
                     final Instruction instruction = Instruction(
                          id: b.id,
                          content: singleInstruction.content,
                          ingredient: b.type,
                     );
                     instructions.add(instruction);
                 }
                 
              }
              items.add(Food(id: food.id, name: food.name, instructions: instructions));
           });
           
        }
        return Model(food: items);
    }

}

class Food {
    final String id;
    final String name;
    final List<Instruction> instructions;

    const Food({
       required this.id,
       required this.name,
       this.instructions = const <Instruction>[],
    });

}

class Instruction {
    final String id;
    final String content;
    final String ingredient;

    const Instruction({
        required this.id,
        required this.content,
        required this.ingredient,
    });
}

現在你可以在你的 UI 中使用 Model 了，它既有食物也有相關的說明。這可能不是簡單應用程式的最佳方法，但是當您的應用程式開始增長時，如果您的后端更改 json 的格式，維護您的模型會更簡單。最后，所有這一切都應該在簡化 UI 和存盤庫（后端）之間關系的狀態管理中

uj5u.com熱心網友回復：

你想要什么，這很簡單，只需定義 2 個類并解碼 JSON 檔案，然后將其存盤到狀態管理中，最后使用它

uj5u.com熱心網友回復：

使用已知 JSON 的最快方法是使用 app.quicktype.io，粘貼您的 json，選擇 dart 并將其轉換為您的類！

標籤：json扑镖列表显示

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

下一篇：PHP：讀取兩個字符內的字串中的文本