我正在使用Flutter创建食品订购移动应用程序。一切都按预期进行，但我陷入了困境。我要更新购物车页面，我的页面包含用于更新和删除购物车列表中购物车项目的图标按钮。按下按钮正在按预期更新服务器中的购物车，但我仍然无法为用户更新UI。在服务器成功响应后更新UI，以通知用户您的购物车已被修改非常重要。我想更新此页面而不离开此页面，以获得更好的用户体验。我在这里附加了我的代码。我想在服务器响应后刷新UI。 请帮帮我。 这是我的代码。 预先感谢。
class FoodOrderPage extends StatefulWidget {
@override
_FoodOrderPageState createState() => _FoodOrderPageState();
}
class _FoodOrderPageState extends State<FoodOrderPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Color(0xFFFAFAFA),
elevation: 0,
leading: IconButton(
icon: Icon(
Icons.arrow_back_ios,
color: Color(0xFF3a3737),
),
onPressed: () => Navigator.of(context).pop(),
),
title: Center(
child: Text(
"Item Carts",
style: TextStyle(
color: Color(0xFF3a3737),
fontWeight: FontWeight.w600,
fontSize: 18),
textAlign: TextAlign.center,
),
),
brightness: Brightness.light,
/*actions: <Widget>[
CartIconWithBadge(),
],*/
),
body: SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 5),
child: Text(
"Your Food Cart",
style: TextStyle(
fontSize: 20,
color: Color(0xFF3a3a3b),
fontWeight: FontWeight.w600),
textAlign: TextAlign.left,
),
),
SizedBox(
height: 10,
),
CartList(),
SizedBox(
height: 15,
),
PromoCodeWidget(),
SizedBox(
height: 10,
),
TotalCalculationWidget(),
SizedBox(
height: 10,
),
Container(
padding: EdgeInsets.only(left: 5),
child: Text(
"Payment Method",
style: TextStyle(
fontSize: 20,
color: Color(0xFF3a3a3b),
fontWeight: FontWeight.w600),
textAlign: TextAlign.left,
),
),
SizedBox(
height: 10,
),
PaymentMethodWidget(),
],
),
),
));
}
}
class CartList extends StatelessWidget {
final String uri = API_URL+'getcart';
Future<List<CartModel>> fetchCart() async {
var data = {'email': GLOBAL_EMAIL};
var response = await http.post(uri, body: json.encode(data));
if (response.statusCode == 200) {
final items = json.decode(response.body).cast<Map<String, dynamic>>();
List<CartModel> listOfCart = items.map<CartModel>((json) {
return CartModel.fromJson(json);
}).toList();
return listOfCart;
}
else {
throw Exception('Failed to load data.');
}
}
@override
Widget build(BuildContext context) {
return FutureBuilder<List<CartModel>>(
future: fetchCart(),
builder: (context, snapshot) {
if (!snapshot.hasData){
return Center(
child: CircularProgressIndicator()
);}
return ListView(
shrinkWrap: true,
scrollDirection: Axis.vertical,
physics: NeverScrollableScrollPhysics(),
children: snapshot.data
.map((data) => CartItem(productName: data.menu_name,
productPrice: data.menu_price.toString() ,
productCartQuantity: data.menu_qty.toString(),
menuID: data.menu_id,
restaID: data.rest_id,
)
).toList(),
);
},
);
}
}
class CartItem extends StatelessWidget {
String productName;
String productPrice;
String productImage;
String productCartQuantity;
String menuID;
String restaID;
CartItem({
Key key,
@required this.productName,
@required this.productPrice,
@required this.productImage,
@required this.productCartQuantity,
@required this.menuID,
@required this.restaID,
}) : super(key: key);
Future <void> addcart(String uEmail, String m_id, String m_name, String m_price, String qty, String r_id) async {
var url = API_URL+ 'addcart';
var data = {'email': uEmail, 'menu_name': m_name, 'menu_id': m_id, 'menu_price': m_price, 'qty': qty, 'resta_id': r_id};
// Starting Web API Call.
var response = await http.post(url, body: json.encode(data));
// Getting Server response into variable.
var message = jsonDecode(response.body);
if(response.statusCode==200){
Fluttertoast.showToast(
msg:message['message'],
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 2,
backgroundColor: Colors.green[600],
textColor: Colors.white,
fontSize: 16.0
);
////////// HERE I WANT TO REFRESH OR RECREATE THE WHOLE PAGE. SO THE UI GET UPDATED AS PER SERVER DATABASE.////////////////////
}
else{
Fluttertoast.showToast(
msg:message['message'],
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 2,
backgroundColor: Colors.green[600],
textColor: Colors.white,
fontSize: 16.0
);
}
}
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
decoration: BoxDecoration(boxShadow: [
BoxShadow(
color: Color(0xFFfae3e2).withOpacity(0.3),
spreadRadius: 1,
blurRadius: 1,
offset: Offset(0, 1),
),
]),
child: Card(
color: Colors.white,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: const BorderRadius.all(
Radius.circular(5.0),
),
),
child: Container(
alignment: Alignment.center,
padding: EdgeInsets.only(left: 5, right: 5, top: 10, bottom: 10),
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 5,
),
Container(
child: Text(
"$productName",
style: TextStyle(
fontSize: 16,
color: Color(0xFF3a3a3b),
fontWeight: FontWeight.w400),
textAlign: TextAlign.left,
),
),
SizedBox(
height: 5,
),
Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Text(
"₹ $productPrice",
style: TextStyle(
fontSize: 14,
color: Color(0xFF3a3a3b),
fontWeight: FontWeight.w400),
textAlign: TextAlign.left,
),
SizedBox(
height: 25,
),
IconButton(
onPressed: () {
var p = double.parse(productPrice)/double.parse(productCartQuantity);
addcart(GLOBAL_EMAIL, menuID, productName, "-"+p.toString(), '-1', restaID);
},
icon: Icon(Icons.remove),
color: Colors.amber,
iconSize: 20,
),
IconButton(
onPressed: () {
var p = double.parse(productPrice)/double.parse(productCartQuantity);
addcart(GLOBAL_EMAIL, menuID, productName, p.toString(), '1', restaID);
CartList().createElement().rebuild();
},
icon: Icon(Icons.add),
color: Colors.green,
iconSize: 20,
),
IconButton(
onPressed: () {
deletecart(GLOBAL_EMAIL, menuID);
},
icon: Icon(Icons.delete_forever),
color: Color(0xFFfd2c2c),
iconSize: 20,
),
],
),
],
),
)),
);
}
}
答案 0 :(得分：0)
如果要重建UI，则必须编写setState()。在setState()中，您必须设置在UI中使用的变量。
例如：
if(response.statusCode==200){
setState(() {
var response = await http.post(url, body: json.encode(data));
});
Fluttertoast.showToast(
msg:message['message'],
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 2,
backgroundColor: Colors.green[600],
textColor: Colors.white,
fontSize: 16.0
);
}
答案 1 :(得分：0)
好吧，我相信要更新名为SetState(() {})的UI，并且您的类必须是StatefulWidget。所以，是的，将您要更新的每个变量或对象都放入SetState内即可。
SetState的基本用途是通知框架内部 该对象的状态已更改。
答案 2 :(得分：0)
在setState（）中使用onPressed（）功能
示例：
IconButton(
onPressed: () {
setState(() {
deletecart(GLOBAL_EMAIL, menuID);
});
},
icon: Icon(Icons.delete_forever),
color: Color(0xFFfd2c2c),
iconSize: 20,
),