Flutter产品列表页

4.0

6/22/2025

编程开发

Flutter

产品列表

Widget

Prompt

class ProductListPage extends StatefulWidget {
  final bool useArabic;

  const ProductListPage({super.key, this.useArabic = false});

  @override
  State<ProductListPage> createState() => _ProductListPageState();
}

class _ProductListPageState extends State<ProductListPage> {
  final ProductService _productService = ProductService();
  late Future<List<Product>> _productFuture;

  @override
  void initState() {
    super.initState();
    _productFuture = _productService.fetchProducts();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.useArabic ? 'المنتجات' : 'Products'),
      ),
      body: FutureBuilder<List<Product>>(
        future: _productFuture,
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.hasError) {
            return Center(child: Text('Error: ${snapshot.error}'));
          } else if (!snapshot.hasData || snapshot.data!.isEmpty) {
            return const Center(child: Text('No products found.'));
          }

          final products = snapshot.data!;
          return ListView.builder(
            itemCount: products.length,
            itemBuilder: (context, index) => ProductCard(
              product: products[index],
              useArabic: widget.useArabic,
            ),
          );
        },
      ),
    );
  }
}

Generated Result

import React, { useState, useEffect } from 'react';

const ProductListPage = ({ useArabic = false }) => {
 const [products, setProducts] = useState([]);
 const [loading, setLoading] = useState(true);
 const [error, setError] = useState(null);

 useEffect(() => {
   fetchProducts()
     .then(data => {
       setProducts(data);
       setLoading(false);
     })
     .catch(err => {
       setError(err);
       setLoading(false);
     });
 }, []);

 if (loading) return <div className='flex justify-center items-center h-screen'><div className='loader'></div></div>;
 if (error) return <div className='flex justify-center items-center h-screen'><p>Error: {error.message}</p></div>;
 if (!products.length) return <div className='flex justify-center items-center h-screen'><p>No products found.</p></div>;

 return (
   <div className='min-h-screen bg-gray-100 p-4'>
     <header className='bg-white shadow p-4'>
       <h1 className='text-2xl font-bold text-gray-800'>{useArabic ? 'المنتجات' : 'Products'}</h1>
     </header>
     <main className='mt-4'>
       <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
         {products.map(product => (
           <ProductCard key={product.id} product={product} useArabic={useArabic} />
         ))}
       </div>
     </main>
   </div>
 );
};

const ProductCard = ({ product, useArabic }) => (
 <div className='bg-white rounded-lg shadow p-4'>
   <img src={product.image} alt={useArabic ? product.nameAr : product.nameEn} className='w-full h-48 object-cover rounded-t-lg' />
   <div className='p-4'>
     <h2 className='text-xl font-semibold text-gray-800'>{useArabic ? product.nameAr : product.nameEn}</h2>
     <p className='text-gray-600 mt-2'>{useArabic ? product.descriptionAr : product.descriptionEn}</p>
     <p className='text-lg font-bold text-gray-900 mt-3'>${product.price}</p>
   </div>
 </div>
);

const fetchProducts = async () => {
 const response = await fetch('https://api.example.com/products');
 if (!response.ok) throw new Error('Failed to fetch products');
 return response.json();
};

export default ProductListPage;

Open Sandbox

More Recommendations

View All

Flutter产品列表页

Prompt

Generated Result

More Recommendations

Build ChatGPT-Like Web Interface

Flutter 产品列表页

Build XO App with AI

Generate YouTube Subscribers

YouTube Subscribers App