Flutter 回调函数
Flutter CallBack Function
我有一个数量需要在父窗口小部件中更新。在子窗口小部件中按 + 或 - 图标时需要更新数量。我将回调函数传递给子无状态小部件,但它不起作用。相反,我收到一条错误消息,指出在构建期间调用了 setstate() 或 markneedsbuild()。
这是父控件
class Wash extends StatefulWidget {
@override
_WashState createState() => _WashState();
}
class _WashState extends State<Wash> {
int quantity = 0;
void updateQuantity(command) {
if (command == 'add') {
setState(() {
quantity++;
});
} else {
setState(() {
quantity--;
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: OrderTile(
imgPath: 'shorts',
itemType: 'Shorts',
quantityCallBack: updateQuantity,
),
);
}
这是子部件
class OrderTile extends StatelessWidget {
OrderTile({this.itemType, this.imgPath, this.quantityCallBack});
final String imgPath;
final String itemType;
final Function quantityCallBack;
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(12.0),
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: CircleAvatar(
backgroundImage: AssetImage('images/${imgPath}.jpg'),
radius: 30.0,
),
),
Expanded(
flex: 3,
child: _Description(
title: itemType,
),
),
GestureDetector(
onTap: quantityCallBack('add'),
child: Icon(
Icons.add,
size: 24.0,
),
),
SizedBox(
width: 14,
),
Text('1'),
SizedBox(
width: 14,
),
GestureDetector(
onTap: quantityCallBack('remove'),
child: Icon(
Icons.remove,
size: 24.0,
),
),
],
),
);
}
}
我在函数回调实现方面做的正确吗?
您在 onTap
回调中以错误的方式调用回调函数。变化:
onTap: quantityCallBack('add'),
为
onTap: () => quantityCallBack('add'),
如果它们具有相同的类型,您只能按照传递的方式传递函数。在这种情况下 onTap
是 void function()
它没有任何参数。
此外,您没有将更新后的 quantity
值传递给您的 Text Widget
我有一个数量需要在父窗口小部件中更新。在子窗口小部件中按 + 或 - 图标时需要更新数量。我将回调函数传递给子无状态小部件,但它不起作用。相反,我收到一条错误消息,指出在构建期间调用了 setstate() 或 markneedsbuild()。
这是父控件
class Wash extends StatefulWidget {
@override
_WashState createState() => _WashState();
}
class _WashState extends State<Wash> {
int quantity = 0;
void updateQuantity(command) {
if (command == 'add') {
setState(() {
quantity++;
});
} else {
setState(() {
quantity--;
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: OrderTile(
imgPath: 'shorts',
itemType: 'Shorts',
quantityCallBack: updateQuantity,
),
);
}
这是子部件
class OrderTile extends StatelessWidget {
OrderTile({this.itemType, this.imgPath, this.quantityCallBack});
final String imgPath;
final String itemType;
final Function quantityCallBack;
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(12.0),
child: Row(
children: <Widget>[
Expanded(
flex: 1,
child: CircleAvatar(
backgroundImage: AssetImage('images/${imgPath}.jpg'),
radius: 30.0,
),
),
Expanded(
flex: 3,
child: _Description(
title: itemType,
),
),
GestureDetector(
onTap: quantityCallBack('add'),
child: Icon(
Icons.add,
size: 24.0,
),
),
SizedBox(
width: 14,
),
Text('1'),
SizedBox(
width: 14,
),
GestureDetector(
onTap: quantityCallBack('remove'),
child: Icon(
Icons.remove,
size: 24.0,
),
),
],
),
);
}
}
我在函数回调实现方面做的正确吗?
您在 onTap
回调中以错误的方式调用回调函数。变化:
onTap: quantityCallBack('add'),
为
onTap: () => quantityCallBack('add'),
如果它们具有相同的类型,您只能按照传递的方式传递函数。在这种情况下 onTap
是 void function()
它没有任何参数。
此外,您没有将更新后的 quantity
值传递给您的 Text Widget