Flutter 商品列表页面开发教程 - 使用 GridView.builder 实现两列展示

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/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: [ Swipper(), 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.75, ), 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(), ); }, ), ), ), ], ), ); } }