Flutter中Future<dynamic>无法转为List<Routes>的异步问题求助

问题根源 #

你直接把_getData()的结果赋值给List<Routes>变量，但**async函数默认返回Future类型**，不能直接当作普通List使用。另外把routes放在类外部，没法在数据加载完成后自动更新UI。

修正方案 #

推荐用FutureBuilder（更贴合Flutter异步状态管理的最佳实践），也可以选择手动管理状态，两种方案如下：

方案一：使用FutureBuilder（推荐）

去掉外部routes变量，用FutureBuilder自动处理异步数据的加载、错误、完成状态：

import 'package:app/api/api.dart';
import 'package:flutter/material.dart';
import 'package:app/models/routes.dart';

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

  @override
  State<RouteList> createState() => _RouteListState();
}

class _RouteListState extends State<RouteList> {
  // 明确返回类型，避免dynamic隐患
  Future<List<Routes>> _fetchRoutes() async {
    return getRouteList(856);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('路线列表'),
        automaticallyImplyLeading: true,
        centerTitle: true,
      ),
      body: FutureBuilder<List<Routes>>(
        future: _fetchRoutes(),
        builder: (context, snapshot) {
          // 加载中状态
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }
          // 加载错误状态
          if (snapshot.hasError) {
            return Center(child: Text('加载失败: ${snapshot.error}'));
          }
          // 数据加载完成
          final routes = snapshot.data ?? [];
          return ListView.separated(
            itemCount: routes.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(routes[index].number),
                subtitle: Text(routes[index].routeType),
                trailing: const Text('??/??'),
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => RouteSelected(
                        passedRoutes: routes[index],
                      ),
                    ),
                  );
                },
              );
            },
            separatorBuilder: (context, index) {
              return const Divider();
            },
          );
        },
      ),
    );
  }
}

方案二：手动管理状态（initState + setState）

如果更习惯手动控制状态，可以把routes移到State类内部，在初始化时加载数据并刷新UI：

import 'package:app/api/api.dart';
import 'package:flutter/material.dart';
import 'package:app/models/routes.dart';

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

  @override
  State<RouteList> createState() => _RouteListState();
}

class _RouteListState extends State<RouteList> {
  List<Routes> routes = [];
  bool isLoading = true;

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

  _getData() async {
    final loadedRoutes = await getRouteList(856);
    setState(() {
      routes = loadedRoutes;
      isLoading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('路线列表'),
        automaticallyImplyLeading: true,
        centerTitle: true,
      ),
      body: isLoading
          ? const Center(child: CircularProgressIndicator())
          : ListView.separated(
              itemCount: routes.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(routes[index].number),
                  subtitle: Text(routes[index].routeType),
                  trailing: const Text('??/??'),
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => RouteSelected(
                          passedRoutes: routes[index],
                        ),
                      ),
                    );
                  },
                );
              },
              separatorBuilder: (context, index) {
                return const Divider();
              },
            ),
    );
  }
}

额外优化：api.dart明确返回类型 #

给getRouteList加上具体返回类型，避免dynamic类型带来的潜在问题：

import 'package:dio/dio.dart'; // 别忘了导入Dio包
import 'package:app/models/routes.dart';

const _url = 'http://10.0.2.2:3000/routes';

// 明确返回Future<List<Routes>>，替代模糊的dynamic
Future<List<Routes>> getRouteList(int driverId) async {
  Response response;
  var dio = Dio(BaseOptions(
    responseType: ResponseType.plain,
  ));
  response = await dio.get(_url, queryParameters: {"driver_id": driverId});
  final data = routesFromJson(response.data);
  return data;
}

核心知识点提醒 #

1. async函数的返回值永远是Future类型，必须用await获取内部值，或通过FutureBuilder监听状态。
2. Flutter中更新UI必须通过setState或状态管理工具，异步数据加载完成后要主动触发UI刷新。
3. 尽量明确变量类型，避免使用dynamic，能提前发现很多类型不匹配的错误。

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