Flutter电商APP：在线JSON数据映射Product实体并GridView展示

Hey there! Let's walk through how to get your e-commerce app switched over to using online JSON data, map it to your Product class, and build a reusable GridView setup. You’ve already got the core pieces in place, so we just need to tie them together properly.

First, let's solidify your network layer—using a library like Retrofit will make JSON parsing and async calls way simpler than manual URLConnection setups. Here's how to implement it:

Step 1: Define an API Interface #

Create a service interface to describe your endpoint:

// Kotlin example (adjust for Java with Retrofit's Java syntax)
interface ProductApiService {
    @GET("products") // Replace with your actual API endpoint path
    suspend fun fetchProducts(): List<Product>
}

Step 2: Initialize Retrofit #

Set up Retrofit with a JSON converter (Gson works perfectly here):

val retrofit = Retrofit.Builder()
    .baseUrl("https://your-api-base-url.com/") // Replace with your API's base URL
    .addConverterFactory(GsonConverterFactory.create())
    .build()

val productApi = retrofit.create(ProductApiService::class.java)

Step 3: Handle Async Calls #

Use Kotlin Coroutines (or AsyncTask/Executors for Java) to avoid blocking the main thread:

// In your Activity/Fragment, use lifecycleScope to tie calls to the UI lifecycle
lifecycleScope.launch {
    try {
        val productList = productApi.fetchProducts()
        // We'll use this list in the GridView next
    } catch (e: Exception) {
        // Handle errors: no network, API failures, etc.
        Toast.makeText(this@YourActivity, "Failed to load products: ${e.message}", Toast.LENGTH_SHORT).show()
    }
}

Make sure your Product class matches the JSON structure exactly. If field names differ (e.g., JSON uses image_url but your class uses imageUrl), use Gson's @SerializedName annotation to bridge the gap:

Example Product Class #

data class Product(
    val id: Int,
    val name: String,
    val price: Double,
    @SerializedName("image_url") // Maps JSON "image_url" to this property
    val imageUrl: String,
    val description: String
)

For Java users, here's the equivalent:

public class Product {
    private int id;
    private String name;
    private double price;
    
    @SerializedName("image_url")
    private String imageUrl;
    
    private String description;

    // Add constructors, getters, and setters (or use Lombok to simplify)
}

To make your product display reusable across screens, create a custom BaseAdapter (or RecyclerView.Adapter if you want to upgrade later) and use a ViewModel to hold your data.

Step 1: Create a Reusable Product Adapter #

class ProductGridAdapter(
    private val context: Context,
    private val products: List<Product>
) : BaseAdapter() {

    override fun getCount(): Int = products.size

    override fun getItem(position: Int): Product = products[position]

    override fun getItemId(position: Int): Long = products[position].id.toLong()

    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {
        // Reuse views to save memory
        val view = convertView ?: LayoutInflater.from(context)
            .inflate(R.layout.item_product_grid, parent, false)
        
        // Bind product data to UI elements
        val currentProduct = getItem(position)
        view.findViewById<TextView>(R.id.tv_product_name).text = currentProduct.name
        view.findViewById<TextView>(R.id.tv_product_price).text = "$${currentProduct.price}"
        
        // Use Glide/Picasso to load product images (handles caching and errors)
        Glide.with(context)
            .load(currentProduct.imageUrl)
            .placeholder(R.drawable.placeholder_image)
            .error(R.drawable.error_image)
            .into(view.findViewById(R.id.iv_product_image))
        
        return view
    }
}

Step 2: Use a ViewModel for Data Reusability #

Store your product list in a ViewModel so it survives configuration changes (like screen rotations) and can be accessed by other UI components:

class ProductViewModel : ViewModel() {
    private val _products = MutableLiveData<List<Product>>()
    val products: LiveData<List<Product>> = _products
    private val productApi = retrofit.create(ProductApiService::class.java)

    fun loadProducts() {
        viewModelScope.launch {
            try {
                _products.value = productApi.fetchProducts()
            } catch (e: Exception) {
                // Log errors or send an error event to the UI
            }
        }
    }
}

Step 3: Connect ViewModel to GridView #

In your Activity/Fragment, observe the ViewModel's LiveData and set the adapter:

val viewModel = ViewModelProvider(this)[ProductViewModel::class.java]

viewModel.products.observe(this) { productList ->
    val adapter = ProductGridAdapter(this, productList)
    yourGridView.adapter = adapter
}

// Trigger data loading when the screen starts
viewModel.loadProducts()

• Separate Data Layer: Move network calls to a Repository class instead of putting them directly in the ViewModel—this makes your data logic reusable across the app.
• Handle Loading States: Add a loading spinner or placeholder while data is fetching to improve user experience.
• Support Multiple UI Components: Since your ViewModel holds the product list, you can use the same data to populate a ListView, RecyclerView, or even a detail screen without re-fetching.
• Validate JSON: Double-check that all JSON fields match your Product class (missing fields will cause parsing errors—use Gson's @Nullable annotation if some fields are optional).

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