如何在DropDownField中設定狀態JSON？

// ignore_for_file: prefer_const_constructors, avoid_unnecessary_containers, prefer_const_literals_to_create_immutables, import_of_legacy_library_into_null_safe, non_constant_identifier_names, unused_field, avoid_print

import 'dart:convert';

import 'package:dropdownfield/dropdownfield.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class FoodWidget extends StatefulWidget {
  const FoodWidget({Key? key}) : super(key: key);

  @override
  _FoodWidgetState createState() => _FoodWidgetState();
}

class _FoodWidgetState extends State<FoodWidget> {
  @override
  void initState() {
    fetchFood();
    super.initState();
  }

  String? food_id;
  List food = [];

  Future<void> fetchFood() async {
    final String response =
        await rootBundle.loadString('assets/list_food.json');
    final data = await json.decode(response);
    print(data);
    setState(() {
      food = data["food"];
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(15.0),
      child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[
            DropDownField(
              onValueChanged: (dynamic value) {
                food_id = value;
              },
              value: food_id,
              required: false,
              labelText: 'Search food',
              items: food,
            ),
          ]),
    );
  }
}

這是 JSON 檔案。我只想在 DropDownField 中獲取名稱，但我做不到。在setState函式上，我真的不知道該怎么說。

{
    "food": [
        {
            "id": 1,
            "name": "coca-cola",
            "calories": 120
        },
        {
            "id": 2,
            "name": "egg",
            "calories": 80
        },
        {
            "id": 3,
            "name": "rice",
            "calories": 100
        }
    ]
}

我試圖列印（資料）來測驗輸出。這一切都來自域名，但我想在里面使用它。我真的不知道該怎么做。

附注。我真的很感激答案和建議。

uj5u.com熱心網友回復：

您只需要映射資料即可獲取其名稱：

  Future<void> fetchFood() async {
    final String response =
        await rootBundle.loadString('assets/list_food.json');
    final data = await json.decode(response);
    print(data);
    setState(() {
       food = data["food"].map((e)=>e['name']).toList();
    });
  }

在獲取食物串列后，您可以映射每個專案以僅獲取食物名稱，這正是您所需要的。

作為旁注

我建議您將來創建一個模型，例如：

class Food {
    Food({
        this.id,
        this.name,
        this.calories,
    });

    int id;
    String name;
    int calories;

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

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

所以你有一個強型別List<Food> food，你可以以型別安全的方式訪問引數。

uj5u.com熱心網友回復：

你需要生成食物類

class Food {
  String? id;
  String? name;
  String? calories;
  Food({
    this.id,
    this.name,
    this.calories,
  });

  Map<String, dynamic> toMap() {
    return {
      'id': id,
      'name': name,
      'calories': calories,
    };
  }

  factory Food.fromMap(Map<String, dynamic> map) {
    return Food(
      id: map['id'],
      name: map['name'],
      calories: map['calories'],
    );
  }

  String toJson() => json.encode(toMap());

  factory Food.fromJson(String source) => Food.fromMap(json.decode(source));
}

完整代碼在這里：

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

  class FoodWidget extends StatefulWidget {
   const FoodWidget({Key? key}) : super(key: key);

  @override
_FoodWidgetState createState() => _FoodWidgetState();
 }

class _FoodWidgetState extends State<FoodWidget> {
@override
 void initState() {
   fetchFood();
  super.initState();
 }

 String? food_id;
 Food? selected_food ;
  List<Food> food = [];

 Future<void> fetchFood() async {
  final String response =
    await rootBundle.loadString('assets/list_food.json');
  final data = await json.decode(response) as List;
  print(data);
  setState(() {
  food = data.map((e) => Food.fromJson(e)).toList();
   });
  }

 @override
 Widget build(BuildContext context) {
  return Container(
  padding:const EdgeInsets.all(15.0),
  child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        DropdownButton<Food>(
          focusColor: Colors.white,
          value: selected_food,
          //elevation: 5,
          style: const TextStyle(color: Colors.white),
          iconEnabledColor: Colors.black,
          underline: const SizedBox.shrink(),
          items: food.map<DropdownMenuItem<Food>>(
              (Food value) {
            return DropdownMenuItem<Food>(
              value: value,
              child: Text(
                value.name!,
                style: const TextStyle(color: Colors.black),
              ),
            );
          }).toList(),
          hint: const Text(
            "Select Shop Category",
            style: TextStyle(
              color: Colors.black38,
            ),
          ),
          onChanged: (Food? value) {
            setState(() {
              selected_food= value!;
            });
            },
          ),
        ]),
     );
    }
   }

    class Food {
     String? id;
     String? name;
     String? calories;
      Food({
       this.id,
       this.name,
      this.calories,
      });

     Map<String, dynamic> toMap() {
      return {
     'id': id,
        'name': name,
     'calories': calories,
    };
    }

    factory Food.fromMap(Map<String, dynamic> map) {
      return Food(
     id: map['id'],
     name: map['name'],
     calories: map['calories'],
    );
    }

   String toJson() => json.encode(toMap());

   factory Food.fromJson(String source) => 
    Food.fromMap(json.decode(source));
    }

標籤：json 扑 镖

上一篇：如何在java中決議不以逗號分隔的Json陣列

下一篇：將嵌套字典拆分為多個字典