Flutter 商品列表页面开发 - 使用 getProducts 获取商品数据并展示

Flutter 商品列表页面开发 - 使用 getProducts 获取商品数据并展示

本文将介绍如何在 Flutter 中使用 getProducts 方法获取商品数据并展示到商品列表页面。

示例代码

import 'package:flutter/material.dart';
import 'package:search_choices/search_choices.dart';
import 'package:video_book_ecommerce/compoment/ProductCard.dart';
import 'package:video_book_ecommerce/compoment/swipper.dart';
import 'package:video_book_ecommerce/service/GetProduct.dart';

class home extends StatefulWidget {
  @override
  _homeState createState() => _homeState();
}

class _homeState extends State<home> {
  List<Product> _productList = [];

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

  void _getProducts() async {
    List<Product> productList = await getProducts(1, 20);
    setState(() {
      _productList = productList;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('商品列表'),
      ),
      body: ListView.builder(
        itemCount: _productList.length,
        itemBuilder: (BuildContext context, int index) {
          Product product = _productList[index];
          return ProductCard(
            imageUrl: product.imageUrl,
            title: product.title,
            price: product.price,
          );
        },
      ),
    );
  }
}

代码说明

1. 在 initState 中调用 _getProducts 方法获取商品数据。
2. _getProducts 方法使用 getProducts(1, 20) 获取第一页的 20 个商品。
3. 使用 setState 更新商品列表状态，触发页面重新渲染。
4. 在 build 方法中使用 ListView.builder 渲染商品卡片，根据 _productList 状态中的数据动态生成卡片。

注意

1. getProducts 方法需要根据实际情况进行定义，它应该返回一个 List<Product>，其中 Product 类包含商品的图片地址、标题和价格等信息。
2. ProductCard 组件需要根据商品数据进行自定义，显示商品的图片、标题和价格等信息。

总结

通过以上方法，我们可以轻松地在 Flutter 页面中展示商品列表，并使用 getProducts 方法获取最新的商品数据。