如何将HTTP请求获取的API数据传递至应用另一页面？

当然可以实现数据跨页面传递，你遇到的无输出问题，基本是传递或接收环节出了疏漏，下面针对你试过的两种方法逐一排查，再补充更省心的方案：

一、对象传递的常见问题排查 #

• 先确认数据模型序列化正确：从JSON解析出来的对象必须能正常转成可传递的格式，比如手动实现fromJson和toJson方法，或者用json_serializable生成序列化代码，不然传递时数据会丢失。
  示例模型代码：

  class Product {
    final String id;
    final String name;
    final double price;
  
    Product({required this.id, required this.name, required this.price});
  
    // 必须实现这两个方法才能正常解析/序列化
    factory Product.fromJson(Map<String, dynamic> json) {
      return Product(
        id: json['id'],
        name: json['name'],
        price: json['price'].toDouble(),
      );
    }
  
    Map<String, dynamic> toJson() {
      return {
        'id': id,
        'name': name,
        'price': price,
      };
    }
  }
  

• 跳转传参和接收要配对：用Navigator.push传对象时，接收页面必须通过构造函数拿到参数，不能漏写。
  跳转代码：

  // 假设已从HTTP请求解析出fetchedProduct
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => ProductDetailPage(product: fetchedProduct),
    ),
  );
  

  接收页面代码：

  class ProductDetailPage extends StatelessWidget {
    final Product product;
  
    // 必须通过构造函数接收参数
    const ProductDetailPage({super.key, required this.product});
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: Column(
            children: [
              Text('商品名称：${product.name}'),
              Text('商品价格：${product.price}'),
            ],
          ),
        ),
      );
    }
  }
  

• 提前验证数据有效性：传递前先打印fetchedProduct的属性，确认HTTP请求返回的JSON已经正确解析成对象，避免传递空数据。

二、SharedPreferences传递的问题排查 #

• 存入时要转成JSON字符串：SharedPreferences不能直接存对象，必须先把对象转成JSON字符串再存入。
  存入代码：

  SharedPreferences prefs = await SharedPreferences.getInstance();
  // 先把对象转成JSON字符串
  String productJson = jsonEncode(fetchedProduct.toJson());
  await prefs.setString('selected_product', productJson);
  

• 取出后要转回对象：从SharedPreferences拿到字符串后，必须解码回对象，还要处理空值情况。
  接收代码（配合FutureBuilder处理异步）：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<Product?>(
        future: _loadProductFromPrefs(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return Text('商品ID：${snapshot.data!.id}');
          } else if (snapshot.hasError) {
            return Text('加载失败');
          } else {
            return CircularProgressIndicator();
          }
        },
      ),
    );
  }
  
  Future<Product?> _loadProductFromPrefs() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    String? productJson = prefs.getString('selected_product');
    if (productJson != null) {
      // 把字符串转回对象
      return Product.fromJson(jsonDecode(productJson));
    }
    return null;
  }
  

• 别忽略异步特性：SharedPreferences的所有操作都是异步的，不能在initState里同步调用，必须用async/await或者FutureBuilder处理。

三、多页面共享数据的更优方案：状态管理 #

如果你的应用需要在多个页面共享这类数据，推荐用状态管理工具（比如Provider、Riverpod、Bloc），能避免频繁页面传参和SharedPreferences的繁琐操作。
示例用Provider实现：

1. 创建状态类：

class ProductProvider extends ChangeNotifier {
  Product? _selectedProduct;

  Product? get selectedProduct => _selectedProduct;

  void setSelectedProduct(Product product) {
    _selectedProduct = product;
    notifyListeners();
  }
}

2. 在入口注册状态：

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => ProductProvider(),
      child: MyApp(),
    ),
  );
}

3. 获取数据后更新状态并跳转：

Product fetchedProduct = Product.fromJson(jsonData);
// 更新状态
Provider.of<ProductProvider>(context, listen: false).setSelectedProduct(fetchedProduct);
// 跳转页面
Navigator.push(context, MaterialPageRoute(builder: (context) => ProductDetailPage()));

4. 在接收页面直接读取状态：

class ProductDetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Product? product = Provider.of<ProductProvider>(context).selectedProduct;
    return Scaffold(
      body: product != null 
          ? Text('商品名称：${product.name}') 
          : Text('暂无数据'),
    );
  }
}

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