Flutter如何将JSON API获取的列表数据传递到详情页面

你这个场景下最简单的实现方式是通过详情页的构造函数传递参数，具体实现步骤和修改后的代码如下：

• 步骤1：改造Details详情页，声明需要接收的用户数据属性，通过构造函数完成参数接收
• 步骤2：修改首页列表的点击逻辑，将选中的列表项对应数据传入详情页构造函数
• 步骤3：完善详情页UI，将接收到的用户数据渲染到页面上

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

void main() {
  runApp(MaterialApp(
    home: Home(),
  ));
}

class Home extends StatelessWidget {
  final String apiUrl = "https://reqres.in/api/users?per_page=15";
  Future<List<dynamic>> _fetchDataUsers() async {
    var result = await http.get(Uri.parse(apiUrl));
    return json.decode(result.body)['data'];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Get HTTP JSON'),
      ),
      body: Container(
        child: FutureBuilder<List<dynamic>>(
          future: _fetchDataUsers(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.hasData) {
              return ListView.builder(
                  padding: EdgeInsets.all(10),
                  itemCount: snapshot.data.length,
                  itemBuilder: (BuildContext context, int index) {
                    // 提前存下当前用户数据，方便调用
                    Map<String, dynamic> currentUser = snapshot.data[index];
                    return ListTile(
                      leading: CircleAvatar(
                        radius: 30,
                        backgroundImage: NetworkImage(currentUser['avatar']),
                      ),
                      title: Text(currentUser['first_name'] + " " + currentUser['last_name']),
                      subtitle: Text(currentUser['email']),
                      // 点击时传递当前用户数据到详情页
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => Details(userInfo: currentUser),
                          ),
                        );
                      },
                    );
                  });
            } else {
              return Center(child: CircularProgressIndicator());
            }
          },
        ),
      ),
    );
  }
}

class Details extends StatelessWidget {
  // 声明接收用户数据的属性
  final Map<String, dynamic> userInfo;
  // 构造函数接收参数
  const Details({super.key, required this.userInfo});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("用户详情"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Center(
              child: CircleAvatar(
                radius: 60,
                backgroundImage: NetworkImage(userInfo['avatar']),
              ),
            ),
            const SizedBox(height: 30),
            Text(
              "姓名：${userInfo['first_name']} ${userInfo['last_name']}",
              style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 15),
            Text(
              "邮箱：${userInfo['email']}",
              style: const TextStyle(fontSize: 16),
            ),
            const SizedBox(height: 15),
            Text(
              "用户ID：${userInfo['id']}",
              style: const TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

如果你的项目路由逻辑比较复杂，也可以选择命名路由传参的方式实现，不过当前单级跳转的场景下，构造函数传参是最简单直接的方案，不需要额外的配置。

内容的提问来源于stack exchange，提问作者Cruzer