Flutter - 使用 Dio 从 API 获取列表数据

Dio 是一个强大的 Dart HTTP 客户端，支持拦截器、全局配置、FormData、文件下载等功能，而且非常易于使用。在本文中，我们将学习如何在 Flutter 中使用 Dio 发起 API 请求，并将数据显示在 ListView 中。在开始实现之前，让我们先了解一下为什么要选择它。

为什么要使用 Dio 进行网络调用？

• Dio 让网络编程变得简单，并能优雅地处理多种边缘情况。
• 它使得同时管理多个并发网络请求变得简单，同时提供了高级错误处理机制的安全性。
• 此外，它还能帮您避免使用 HTTP 包时所需的繁琐模板代码，特别是在追踪文件上传进度时。

现在，让我们深入研究代码，了解 Dio 如何发起 API 调用并在 ListView 中显示数据。

分步实现

步骤 1：在 pubspec.yaml 文件中添加 Dio 包并导入

!image!image

步骤 2：使用 ListView Builder 构建基础 UI

Dart


CODEBLOCK_690de675

输出屏幕：

!Output Screen

步骤 3：使用 Dio 包发起 GET 请求

• 为此，我们创建了一个名为 getData() 的函数
• 在 initState() 中调用该函数

!image

步骤 4：在屏幕上显示来自 API 的数据

• 首先，我们使用 itemCount 来获取 API 返回数据的长度
• 现在，为了在屏幕上查看数据，我们使用了 Title 和 Subtitle 特性。
• Title 将显示超级英雄的名字，Subtitle 将显示 API 数据中包含的超级英雄的能力。

!image

输出屏幕：

!Output Screen.jpeg)

步骤 5：现在在屏幕上显示图片

• 我们在 ListTile 中使用了 Image.network，用于从 API 获取图片数据
• 使用 ClipRRect 属性，我们将图片以圆形的形式显示出来。

!image

输出屏幕：

!Output Screen

完整代码

Dart


“

import ‘dart:convert‘;

import ‘package:flutter/material.dart‘;

import ‘package:dio/dio.dart‘;

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return MaterialApp(

title: ‘Flutter Demo‘,

theme: ThemeData(

primarySwatch: Colors.green,

),

home: const MyHomePage(),

);

}

}

class MyHomePage extends StatefulWidget {

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

@override

State createState() => _MyHomePageState();

}

class _MyHomePageState extends State {

var jsonList;

@override

void initState() {

getData();

}

void getData() async {

try {

var response = await Dio()