这是我写的代码。我正在尝试使列表视图在文本小部件的正下方开始，并在支付按钮之前结束。向上滚动时，列表视图应在文本小部件的正下方消失，向下滚动时，应在支付按钮的正上方消失。如有任何帮助，我们将不胜感激。
import 'package:ecommerce/Models/shop_functions.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:ecommerce/Models/shop_functions.dart';
class Cart extends StatefulWidget {
const Cart({super.key});
@override
State<Cart> createState() => _CartState();
}
class _CartState extends State<Cart> {
@override
Widget build(BuildContext context) {
final palette =Theme.of(context).colorScheme;
return Consumer<ShopFunctions>(
builder: (context, value , child) {
double priceTotal = 0 ;
for(var val in value.cart)
{
priceTotal += val.price;
}
return Scaffold(
floatingActionButton: Container(
width: 200,
child: FloatingActionButton(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
backgroundColor: Colors.blue,
onPressed: () { },
child: Text('Pay Rs ${priceTotal}' ,
style: TextStyle(
color: Colors.white
),
),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
backgroundColor: palette.background,
appBar: AppBar(
elevation: 0,
backgroundColor: palette.background,
),
body: Padding(
padding: const EdgeInsets.only(left: 20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Cart' ,
style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.bold
),
),
Text('Check your cart before paying',
style: TextStyle(
color: palette.inversePrimary
),
),
Expanded(
child: ListView.builder(
itemCount: value.cart.length,
shrinkWrap: true,
itemBuilder: (context, index){
return Padding(
padding: const EdgeInsets.all(8.0),
child: ListTile(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10)
),
tileColor: palette.primary,
leading: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.asset(value.cart[index].imagePath)
),
title: Text(value.cart[index].name ,
style: TextStyle(
fontWeight: FontWeight.bold
),
),
subtitle: Text(value.cart[index].price.toString()),
trailing: IconButton(
icon: Icon(Icons.delete),
onPressed: (){
value.removeFromCart(value.cart[index]);
},
),
),
);
}),
),
],
),
),
);
}
);
}
}
尝试我所做的更改，请阅读评论以进行澄清。
class Cart extends StatefulWidget {
const Cart({super.key});
@override
State<Cart> createState() => _CartState();
}
class _CartState extends State<Cart> {
@override
Widget build(BuildContext context) {
final palette = Theme.of(context).colorScheme;
return Consumer<ShopFunctions>(
builder: (context, value, child) {
double priceTotal = 0;
for (var val in value.cart) {
priceTotal += val.price;
}
return Scaffold(
// FOR YOUR PURPOSE FloatingActionButton IS NOT AN IDEAL FIT. SO I RECOMMEND REMOVING IT.
//
// floatingActionButton: SizedBox(
// width: 200,
// child: FloatingActionButton(
// shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
// backgroundColor: Colors.blue,
// onPressed: () {},
// child: Text(
// 'Pay Rs ${priceTotal}',
// style: const TextStyle(color: Colors.white),
// ),
// ),
// ),
backgroundColor: palette.background,
appBar: AppBar(elevation: 0, backgroundColor: palette.background),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
body: Padding(
padding: const EdgeInsets.only(left: 20.0),
// WRAP WIDGET WITH SafeArea SO THAT 'Pay Rs $priceTotal' BUTTON BELOW IS SHOWN CORRECTLY IN THE iOS.
child: SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('Cart', style: TextStyle(fontSize: 35, fontWeight: FontWeight.bold)),
Text('Check your cart before paying', style: TextStyle(color: palette.inversePrimary)),
Expanded(
child: ListView.builder(
shrinkWrap: true,
// TRY PLAYING WITH THIS PADDING TO REMOVE THE TOP SPACE.
padding: EdgeInsets.zero,
// OR SET THIS,
// padding: const EdgeInsets.symmetric(horizontal: 20),
itemCount: value.cart.length,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: ListTile(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
tileColor: palette.primary,
leading: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: Image.asset(value.cart[index].imagePath)),
title: Text(
value.cart[index].name,
style: const TextStyle(fontWeight: FontWeight.bold),
),
subtitle: Text(value.cart[index].price.toString()),
trailing: IconButton(
icon: const Icon(Icons.delete),
onPressed: () {
value.removeFromCart(value.cart[index]);
},
),
),
);
}),
),
// floatingActionButton FROM ABOVE IS MOVED HERE.
SizedBox(
width: 200,
child: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.blue,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
child: Text(
'Pay Rs $priceTotal',
style: const TextStyle(color: Colors.white),
),
),
)
],
),
),
),
);
},
);
}
}