Flutter 电商应用首页 - 商品列表与轮播图

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

class Home extends StatefulWidget { @override _HomeState createState() => _HomeState(); }

class _HomeState extends State { var _productList = []; int _currentPage = 1; int _pageSize = 20; bool _isLoading = false;

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

void _getProducts() async { setState(() { _isLoading = true; }); List productList = await GetProduct.getProducts(_currentPage, _pageSize); setState(() { _productList.addAll(productList); _isLoading = false; }); }

@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('商品列表'), ), body: Column( children: [ Container( height: 200, child: Swiper( itemCount: 3, itemBuilder: (BuildContext context, int index) { return Image.network( 'https://picsum.photos/id/${index + 10}/400/200', fit: BoxFit.cover, ); }, ), ), Expanded( child: NotificationListener( onNotification: (ScrollNotification notification) { if (!_isLoading && notification.metrics.pixels == notification.metrics.maxScrollExtent) { _currentPage++; _getProducts(); return true; } return false; }, child: GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, childAspectRatio: 0.6, // 调整商品卡片宽高比 ), itemCount: _productList.length + 1, itemBuilder: (BuildContext context, int index) { if (index == _productList.length) { return _isLoading ? CircularProgressIndicator() : SizedBox.shrink(); } product products = _productList[index]; return ProductCard( imageUrl: products.imageUrl, title: products.name, price: products.price.toString(), ); }, ), ), ), ], ), ); } }