我正在 Udemy 上学习 Flutter 课程。目前，我们正在使用以下代码构建我们自己的小部件：
class ReusableCard extends StatelessWidget {
const ReusableCard(
{super.key,
required this.colour,
this.cardChild = const Placeholder(),
required this.onPress});
final Color colour;
final Widget cardChild;
final Function? onPress;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onPress!(),
child: Container(
margin: const EdgeInsets.all(15),
decoration: BoxDecoration(
color: colour,
borderRadius: BorderRadius.circular(10),
),
child: cardChild,
),
);
}
}
该小部件当前的想法是实现一个功能，当用户单击它（即点击GestureDetector）时，背景会用另一种颜色标记（即卡被“选择”）。
StatefulWidget现在，当我像这样使用这个小部件时
class _InputPageState extends State<InputPage> {
Gender? selectedGender;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('BMI CALCULATOR'),
),
body: Column(
children: [
Expanded(
child: Row(
children: [
Expanded(
child: ReusableCard(
colour: selectedGender == Gender.male
? activeCardBackground
: inactiveCardBackground,
cardChild: const ChooseGender(
icon: FontAwesomeIcons.mars,
text: 'MALE',
),
onPress: () => setState(() {
selectedGender = Gender.female;
}),
),
),
// ...
]),
),
// ...
],
),
);
}
}
我收到错误消息：setState() or markNeedsBuild() called during build.。onPress如果我使用自定义创建的 widget 中的函数，就会发生这种情况ReusableCard。
当我将使用小部件的代码更改ReusableCard为类似的代码（即我GestureDetector围绕 a制作ReusableCard并使用该函数onTap）时，该函数可以正常工作。
Expanded(
child: GestureDetector(
onTap: () => setState(() {
selectedGender = Gender.male;
}),
child: ReusableCard(
colour: selectedGender == Gender.male
? activeCardBackground
: inactiveCardBackground,
cardChild: const ChooseGender(
icon: FontAwesomeIcons.mars,
text: 'MALE',
),
onPress: () {},
),
),
),
GestureDetector我现在的问题是，为什么当我在自己的小部件中使用 the 时（以及使用onPress来自的函数）时会收到错误消息ReusableCard，但当我GestureDetector在 a 周围使用ReusableCard该函数时却不会收到错误消息onTap？
