human 我用flutter写了一个商城我现在缺少一个显示购物车的页面我想在底栏可以跳转到购物车页面给我代码我现在的主页代码是import packageecommerce_musepagesProductDetailPagedart; import packagefluttermaterialdart; import packagepull_to_refreshpull_to_refreshd
您需要添加一个新的页面来显示购物车,可以使用Flutter的StatefulWidget来创建一个新的页面。以下是示例代码:
import 'package:flutter/material.dart';
import 'package:ecommerce_muse/services/api_service.dart';
import 'package:ecommerce_muse/models/cart.dart';
class CartPage extends StatefulWidget {
@override
_CartPageState createState() => _CartPageState();
}
class _CartPageState extends State<CartPage> {
Cart? _cart;
@override
void initState() {
super.initState();
_loadCart();
}
Future<void> _loadCart() async {
Cart cart = await ApiService.getCart();
setState(() {
_cart = cart;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('购物车'),
),
body: _cart == null
? Center(
child: CircularProgressIndicator(),
)
: Column(
children: [
Expanded(
child: ListView.builder(
itemCount: _cart!.products.length,
itemBuilder: (BuildContext context, int index) {
CartProduct product = _cart!.products[index];
return ListTile(
leading: Image.network(product.imageUrl),
title: Text(product.name),
subtitle: Text('价格: ¥${product.price.toStringAsFixed(2)}'),
trailing: Text('数量: ${product.quantity}'),
);
},
),
),
Container(
padding: EdgeInsets.all(16),
child: Text(
'总价: ¥${_cart!.totalPrice.toStringAsFixed(2)}',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
),
],
),
);
}
}
在主页中添加一个底部导航栏,其中一个选项可以跳转到购物车页面。以下是示例代码:
import 'package:flutter/material.dart';
import 'package:ecommerce_muse/pages/ProductDetailPage.dart';
import 'package:ecommerce_muse/pages/CartPage.dart';
import 'package:pull_to_refresh/pull_to_refresh.dart';
import 'package:cached_network_image/cached_network_image.dart';
import '../models/product.dart';
import '../services/api_service.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
AnimationController? _animationController;
Animation<double>? _animation;
List<Product> _products = [];
int _page = 1;
final int _limit = 20;
RefreshController _refreshController = RefreshController(initialRefresh: false);
void _onLoading() async {
_page++;
List<Product> 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<void> _loadProducts() async {
List<Product> 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: <Widget>[
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: <Widget>[
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: (int index) {
if (index == 1) {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => CartPage()),
);
}
},
),
);
}
}
在底部导航栏中添加了一个选项,当用户点击该选项时,会跳转到购物车页面。您可以使用Navigator.push方法来跳转到新页面
原文地址: https://www.cveoy.top/t/topic/fvk8 著作权归作者所有。请勿转载和采集!