主页 / coding / 问题 / 78285355
Accepted
StarkesWeb
Asked: 2024-04-07 01:48:03 +0800 CST

解决构建期间调用 setState() 或 markNeedsBuild() 的问题

  • 772

我正在 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？

flutter

1 个回答

  1. Best Answer

    问题在于你的ReusableCard定义。

    首先，在声明函数变量时，建议提供函数的完整签名。这有助于捕获各种类型相关的错误。

    所以而不是

    final Function? onPress;

    你要

    final void Function()? onPress;

    其次，当您执行以下操作时：

    GestureDetector(
  onTap: onPress!(),
  ...
)

    您将立即调用该onPress函数并将结果传递给GestureDetector. 您要做的只是将函数本身传递给GestureDetector，以便GestureDetector类可以控制函数何时被调用。

    GestureDetector(
  onTap: onPress,
  ...
)
    • 1

相关问题