flutter - 如何从另一个小部件状态处理一个小部件状态?
问题描述
我正在制作一个有购物车的颤振应用程序。现在,当我们选择特定产品时,我只是在处理它的单一功能,在增加或减少其数量之后,我们的购物车不会立即显示购物车上该商品的数量。我们必须转到另一个小部件,然后它会更新购物车上的计数。注意:HomeScreen 包含两个有状态的小部件,一个是底部导航栏,其中包含购物车和其他图标以及其他图标及其各自的 UI,另一个是显示我们所有产品的产品屏幕,在我的产品屏幕中,我使用了 listview 和在其 UI 中,我使用 - 和 + 图标来增加或减少其数量。我正在共享小部件的代码 - 和 +(产品屏幕的一小部分),我想在其上实现此功能。这是要显示的视频链接 https://youtu.be/3qqVpmWguys
主屏幕:
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
//static _HomeScreenState of(BuildContext context) => context.ancestorStateOfType(const TypeMatcher<_HomeScreenState>());
int _currentindex = 0;
var cart;
final List<Widget> children = [
ProductScreen(),
OrderScreen(),
CartScreen(),
AccountScreen(),
];
List<BottomNavigationBarItem> _buildNavigationItems() {
var bloc = Provider.of<CartManager>(context);
int totalCount = bloc.getCart().length;
setState(() {
totalCount;
});
return <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(
Icons.reorder,
size: 30,
color: Colors.white,
),
title: Text(
'Product',
style: TextStyle(fontSize: 15, color: Colors.white),
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.add_alert,
size: 30,
color: Colors.white,
),
title: Text(
'Order',
style: TextStyle(fontSize: 15, color: Colors.white),
),
),
BottomNavigationBarItem(
icon: Stack(
children: <Widget>[
Icon(
Icons.shopping_cart,
size: 30,
color: Colors.white,
),
Positioned(
bottom: 12.0,
right: 0.0,
child: Container(
constraints: BoxConstraints(
minWidth: 20.0,
minHeight: 20.0,
),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text(
'$totalCount',
style: TextStyle(
fontSize: 12,
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
),
)
],
),
title: Text(
'Cart',
style: TextStyle(fontSize: 15, color: Colors.white),
),
),
BottomNavigationBarItem(
icon: Icon(
Icons.lock,
size: 30,
color: Colors.white,
),
title: Text(
'Account',
style: TextStyle(fontSize: 15, color: Colors.white),
),
),
];
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
backgroundColor: Colors.white,
resizeToAvoidBottomPadding: true,
body: children[_currentindex],
bottomNavigationBar: BottomNavigationBar(
fixedColor: Colors.transparent,
backgroundColor: Colors.orange,
onTap: onNavigationTapbar,
currentIndex: _currentindex,
items: _buildNavigationItems(),
type: BottomNavigationBarType.fixed,
),
),
);
}
void onNavigationTapbar(int index) {
setState(() {
_currentindex = index;
});
}
}
ProductScreen 增量器或减量器:
class TEProductIncrementor extends StatefulWidget {
var product;
TEProductIncrementor({
this.product,
});
@override
_TEProductIncrementorState createState() => new _TEProductIncrementorState();
}
class _TEProductIncrementorState extends State<TEProductIncrementor> {
int totalCount = 0;
@override
Widget build(BuildContext context) {
var cartmanager = CartManager();
void decrementsavecallback() {
// bloc.decreaseToCart(widget.ctlist);
//CartManager().updateToCart(totalCount.toString(), widget.ctlist);
setState(() {
if (totalCount > 0) {
totalCount--;
cartmanager.updateToCart(totalCount.toString(),widget.product);
}
});
}
void increasesavecallback() {
setState(() {
totalCount++;
cartmanager.updateToCart(totalCount.toString(),widget.product);
});
}
return Container(
margin: EdgeInsets.only(top: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10), color: Colors.orange),
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
IconButton(
iconSize: 30,
icon: new Icon(
Icons.remove,
),
onPressed: () {
decrementsavecallback();
},
),
Text(
totalCount.toString(),
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
IconButton(
iconSize: 30,
icon: new Icon(Icons.add),
onPressed: () {
increasesavecallback();
},
)
],
),
),
);
}
}
解决方案
您可以将整个函数传递到刚刚实现的小部件中,如下所示
class Parent extends StatefulWidget {
@override
_ParentState createState() => _ParentState();
}
class _ParentState extends State<Parent> {
@override
Widget build(BuildContext context) {
return Button(
(){
setState(() {
///define your logic here
});
}
);
}
}
class Button extends StatelessWidget {
final Function onTap;
Button(this.onTap);
@override
Widget build(BuildContext context) {
return FlatButton(
onPressed: onTap,
);
}
}
但是如果你的项目很大,那么我会推荐你使用任何状态管理库,比如 redux 或 mobx。
推荐阅读
- for-loop - 1 列通过,传递的数据在 for 循环中有 0 列错误
- flutter - 使用 Flutter Getx 的 BottomNavigationBar
- javascript - pickadate (JavaScript) 设置后不更新最大日期
- php - Magento 2.4.3 管理员从观察者重定向
- android - Nginx DoT 网关 > 状态 500
- drawing - 绘制此图(和类似图)的最佳方法?
- php - 如何在php中写入现有的pdf文件
- windows - 在 Windows Server 2012 上查找 Core 2.2 时出现问题
- php - Google Drive API - PHP - 递归获取所有文件夹内容并输出为非嵌套数组
- javascript - 如何在js上的自定义图片上做拉伸效果(衣服或果冻)