从API获取数据作为字典列表并在DropdownButton中显示它

Question

我是 Flutter 新手，我正在尝试将 API 数据导入 Flutter。该 API 包含

List<Maps>

"responseObj"

和

key

value

对。我想获取该数据并在应用程序启动时将其显示到

DropdownButton

，即

initState()

。我希望我的输出看起来像这样：

这是API： http://161.97.96.193:3333/LovLeaveRequest

下面是我的代码：

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  String? value;
  List<String> leaveRequest = [];

  Future<List> get() async {
    var response = await http.get(
      Uri.parse("http://161.97.96.193:3333/LovLeaveRequest"),
    );
    if (response.statusCode == 200) {
      final jsonData = jsonDecode(response.body);
      return jsonData["responseObj"];
    } else {
      throw Exception();
    }
  }

  @override
  void initState() {
    // leaveRequest = get();
    get();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Center(
          child: DropdownButton<String>(
            hint: Text('Select Type'),
            value: this.value,
            items: leaveRequest.map((item) {
              return DropdownMenuItem(
                child: Text(item),
                value: item,
              );
            }).toList(),
            onChanged: (value) {
              setState(() {
                this.value = value;
              });
            },
          ),
        ),
      ),
    );
  }
}

我在

initState()

中的注释行遇到的问题是：

“Future”类型的值不能分配给“List”类型的变量。
尝试更改变量的类型，或将右侧类型转换为“List”。

Answer 1

获取 API 响应是一项艰巨的工作。 如果您使用纯 json 响应，那么维护您的代码会更加困难，并且您的代码会变成意大利面条代码。因此，处理它的最简单方法是生成一个在 JSON 格式之间相互转换的模型类。

我建议你看看 JSON Serialization。

此外，您应该在获取数据时显示圆形或线性的加载栏，以便用户不会对应用程序冻结感到困惑。这是我修改过的代码。

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  String? value;
  bool loading = true;
  List<ApiResponse> leaveRequest = [];

  void get() async {
    var response = await http.get(
      Uri.parse("http://161.97.96.193:3333/LovLeaveRequest"),
    );
    if (response.statusCode == 200) {
      final jsonData = jsonDecode(response.body);
      List<dynamic> data = jsonData["responseObj"];
      for (dynamic d in data) {
        leaveRequest.add(ApiResponse.fromJson(d));
      }
      setState(() {
        loading = false;
      });
    } else {
      throw Exception();
    }
  }

  @override
  void initState() {
    get();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        child: Center(
          child: loading
              ? CircularProgressIndicator()
              : DropdownButton<String>(
                  hint: const Text('Select Type'),
                  value: value,
                  items: leaveRequest.map((item) {
                    return DropdownMenuItem(
                      value: item.value,
                      child: Text(item.value),
                    );
                  }).toList(),
                  onChanged: (val) {
                    setState(() {
                      value = val;
                    });
                  },
                ),
        ),
      ),
    );
  }
}

class ApiResponse {
  ApiResponse({
    required this.key,
    required this.value,
  });

  int key;
  String value;

  factory ApiResponse.fromJson(Map<String, dynamic> json) => ApiResponse(
        key: json["Key"],
        value: json["Value"],
      );

  Map<String, dynamic> toJson() => {
        "Key": key,
        "Value": value,
      };
}

这是奖励部分。当在 initState 方法中调用异步方法时，你应该这样调用

快乐编码TT

@override
void initState(){
super.initState();
 WidgetsBinding.instance.addPostFrameCallback((_){
    *yourAsyncMethod();   });
}