Flutter 产品列表页

4.0

6/22/2025

编程开发

Flutter

Dart

产品列表

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(() => {
 fetch('https://api.example.com/products')
 .then(response => response.json())
 .then(data => {
 setProducts(data);
 setLoading(false);
 })
 .catch(error => {
 setError(error);
 setLoading(false);
 });
 }, []);

 if (loading) return <div className='flex justify-center items-center h-screen'><div className='animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900'></div></div>;
 if (error) return <div className='flex justify-center items-center h-screen text-red-500'>Error: {error.message}</div>;
 if (!products.length) return <div className='flex justify-center items-center h-screen'>No products found.</div>;

 return (
 <div className='bg-gray-100 min-h-screen'>
 <nav className='bg-white shadow-lg'>
 <div className='max-w-6xl mx-auto px-4'>
 <div className='flex justify-between'>
 <div className='flex space-x-7'>
 <div>
 <a href='#' className='flex items-center py-4 px-2'>
 <span className='font-semibold text-gray-500 text-lg'>{useArabic ? 'المنتجات' : 'Products'}</span>
 </a>
 </div>
 </div>
 </div>
 </div>
 </nav>
 <div className='max-w-6xl mx-auto py-6 px-4'>
 <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6'>
 {products.map(product => (
 <div key={product.id} className='bg-white rounded-lg shadow-md overflow-hidden'>
 <img src='https://placehold.co/300X300' alt={product.name} className='w-full h-48 object-cover' />
 <div className='p-4'>
 <h2 className='text-lg font-bold mb-2'>{product.name}</h2>
 <p className='text-gray-700'>{product.description}</p>
 </div>
 </div>
 ))}
 </div>
 </div>
 </div>
 );
};

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