Flutter 商城应用 - 底部导航栏跳转购物车页面 - 常规

import 'package:ecommerce_muse/pages/CartPage.dart'; import 'package:ecommerce_muse/pages/ProductDetailPage.dart'; import 'package:cached_network_image/cached_network_image.dart'; import 'package:flutter/material.dart'; import 'package:pull_to_refresh/pull_to_refresh.dart'; import '../models/product.dart'; import '../services/api_service.dart';

class HomePage extends StatefulWidget { @override _HomePageState createState() => _HomePageState(); }

class _HomePageState extends State with SingleTickerProviderStateMixin { AnimationController? _animationController; Animation? _animation; List _products = []; int _page = 1; final int _limit = 20; RefreshController _refreshController = RefreshController(initialRefresh: false);

void _onLoading() async { _page++; List newProducts = await ApiService.getProductList(page: _page, limit: _limit); setState(() { _products.addAll(newProducts); }); _refreshController.loadComplete(); }

@override void initState() { super.initState(); _loadProducts();

_animationController = AnimationController(
  vsync: this,
  duration: Duration(milliseconds: 300),
);

_animation = Tween<double>(begin: 1, end: 0.95).animate(
  CurvedAnimation(
    parent: _animationController!,
    curve: Curves.easeInOut,
  ),
);

}

Future _loadProducts() async { List products = await ApiService.getProductList(page: _page, limit: _limit); setState(() { _products = products; }); }

@override void dispose() { _animationController!.dispose(); super.dispose(); }

Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('商城主页')), body: SmartRefresher( enablePullDown: false, enablePullUp: true, controller: _refreshController, onLoading: _onLoading, child: GridView.builder( itemCount: _products.length, gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, childAspectRatio: 0.75, ), itemBuilder: (BuildContext context, int index) { final product = _products[index]; return GestureDetector( onTap: () { Navigator.push( context, MaterialPageRoute( builder: (context) => ProductDetailPage(productId: product.id), ), ); }, child: ScaleTransition( scale: _animation!, child: Card( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Expanded( child: CachedNetworkImage( imageUrl: product.imageUrl, fit: BoxFit.cover, errorWidget: (context, url, error) => Icon(Icons.error), ), ), Padding( padding: EdgeInsets.all(8), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text(product.name, style: TextStyle(fontWeight: FontWeight.bold)), SizedBox(height: 4), Text('价格: ¥${product.price.toStringAsFixed(2)}'), SizedBox(height: 4), Text('品牌: ${product.brand}'), ], ), ), ], ), ), ), ); }, ), ), bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem( icon: Icon(Icons.home), label: '首页', ), BottomNavigationBarItem( icon: Icon(Icons.shopping_cart), label: '购物车', ), ], currentIndex: 0, onTap: (index) { if (index == 1) { Navigator.push( context, MaterialPageRoute(builder: (context) => CartPage()), ); } }, ), ); } }