Flutter中如何传递Rick and Morty API数据至详情页并渲染展示

一、当前参数传递方式的正确性 #

你通过Navigator.pushNamed传递snapshot.data![index]（即DataApi实例）的方式是可行的，只要确保路由注册正确，就能完成参数传递。

二、注册详情页路由 #

在MaterialApp的routes配置中添加/details路由，指向你的详情页组件：

MaterialApp(
  routes: {
    '/details': (context) => const CharacterDetailsPage(),
    // 其他路由配置...
  },
)

三、详情页接收参数并渲染信息 #

在详情页中，通过ModalRoute获取传递的DataApi实例，再用Text组件展示角色信息：

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

  @override
  Widget build(BuildContext context) {
    // 获取传递的角色数据
    final character = ModalRoute.of(context)!.settings.arguments as DataApi;

    return Scaffold(
      appBar: AppBar(title: Text(character.name)),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 角色图片
            ClipRRect(
              borderRadius: BorderRadius.circular(12),
              child: Image.network(
                character.image,
                height: 200,
                width: double.infinity,
                fit: BoxFit.cover,
              ),
            ),
            const SizedBox(height: 16),
            Text('姓名: ${character.name}', style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
            const SizedBox(height: 8),
            Text('状态: ${character.state}'),
            const SizedBox(height: 8),
            Text('物种: ${character.gender}'),
          ],
        ),
      ),
    );
  }
}

四、优化建议 #

1. 修正字段语义混淆：你的DataApi中gender字段实际对应API的species（物种），建议修改字段名增强代码可读性：

class DataApi {
  String image;
  String name;
  String status; // 替换原state，贴合API字段名
  String species; // 替换原gender，修正语义

  DataApi({
    required this.image,
    required this.name,
    required this.status,
    required this.species,
  });

  factory DataApi.fromJson(Map<String, dynamic> json) {
    return DataApi(
      image: json['image'],
      name: json['name'],
      status: json['status'],
      species: json['species'],
    );
  }
}

2. 空安全优化：避免强制解包snapshot.data，添加空状态判断：

if (snapshot.hasData) {
  final character = snapshot.data![index];
  return GestureDetector(
    onTap: () {
      Navigator.pushNamed(
        context,
        '/details',
        arguments: character,
      );
    },
    child: Container(
      margin: const EdgeInsets.all(3.0),
      decoration: BoxDecoration(
        borderRadius: const BorderRadius.all(Radius.circular(9.0)),
        image: DecorationImage(
          image: NetworkImage(character.image),
          fit: BoxFit.cover,
        ),
      ),
    ),
  );
} else {
  return const Center(child: CircularProgressIndicator());
}

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