part 'post.g.dart'; // 这行是自动生成的文件，需要手动添加

    @JsonSerializable()
    class Post {
      final int userId;
      final int id;
      final String title;
      final String body;

      Post({
        required this.userId,
        required this.id,
        required this.title,
        required this.body,
      });

      factory Post.fromJson(Map<String, dynamic> json) => _$PostFromJson(json);
      Map<String, dynamic> toJson() => _$PostToJson(this);
    }
    ```
3.  **运行代码生成器**：在终端运行 `flutter pub run build_runner build`。这会生成 `post.g.dart` 文件。
4.  **使用模型**：
    ```dart
    final Map<String, dynamic> jsonMap = jsonDecode(response.body);
    final Post post = Post.fromJson(jsonMap);
    print(post.title);
    ```

// lib/models/product.dart
class Product {
  final int id;
  final String name;
  final double price;
  final String imageUrl;

  Product({
    required this.id,
    required this.name,
    required this.price,
    required this.imageUrl,
  });

  factory Product.fromJson(Map<String, dynamic> json) {
    return Product(
      id: json["id"] as int,
      name: json["name"] as String,
      price: (json["price"] as num).toDouble(), // JSON 可能返回 int 或 double
      imageUrl: json["imageUrl"] as String,
    );
  }
}

// lib/services/product_service.dart
import 'package:http/http.dart' as http;
import 'dart:convert';
import '../models/product.dart';

class ProductService {
  static const String _baseUrl = 'https://my-json-server.typicode.com/typicode/demo/posts'; // 模拟 API

  Future<List<Product>> fetchProducts() async {
    final response = await http.get(Uri.parse(_baseUrl));

    if (response.statusCode == 200) {
      // 模拟的 API 返回的是 posts，我们将其视为 products
      final List<dynamic> jsonList = jsonDecode(response.body);
      return jsonList.map((json) => Product.fromJson(json)).toList();
    } else {
      throw Exception('Failed to load products');
    }
  }
}

import 'package:flutter/material.dart';
import 'package:my_app/models/product.dart'; // 假设你的文件路径
import 'package:my_app/services/product_service.dart'; // 假设你的文件路径

class ProductListScreen extends StatefulWidget {
  const ProductListScreen({super.key});

  @override
  State<ProductListScreen> createState() => _ProductListScreenState();
}

class _ProductListScreenState extends State<ProductListScreen> {
  late Future<List<Product>> _productsFuture;

  @override
  void initState() {
    super.initState();
    _productsFuture = ProductService().fetchProducts();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('商品列表'),
      ),
      body: FutureBuilder<List<Product>>(
        future: _productsFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text('错误: ${snapshot.error}'));
          } else if (snapshot.hasData) {
            final products = snapshot.data!;
            return ListView.builder(
              itemCount: products.length,
              itemBuilder: (context, index) {
                final product = products[index];
                return Card(
                  margin: const EdgeInsets.all(8.0),
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Row(
                      children: <Widget>[
                        // 模拟图片，实际应用中会加载网络图片
                        // Image.network(product.imageUrl, width: 80, height: 80, fit: BoxFit.cover),
                        Container(
                          width: 80,
                          height: 80,
                          color: Colors.grey[300],
                          child: Center(child: Text('图片\n${product.id}')),
                        ),
                        const SizedBox(width: 10),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Text(
                                product.name,
                                style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                              ),
                              Text('价格: \$${product.price.toStringAsFixed(2)}'),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              },
            );
          } else {
            return const Center(child: Text('没有商品数据。'));
          }
        },
      ),
    );
  }
}

void main() {
  runApp(const MaterialApp(home: ProductListScreen()));
}