Future.delayed 之后设置的表单不会在变量的后续状态改变后重建

我有一个场景，我需要Form仅在某个Future完成后才显示（实际上，是在动画完成后，但我在下面的代码片段中简化了内容以便于重现）。

然后，当表格填写并提交，并且表格中提供的答案正确时，我需要更改表格字体的颜色（除其他事项外，但我正在简化）。

我曾尝试通过更改 setState 中变量的值来执行此操作（更改表单字体颜色）_isAnswerCorrect，该值会传递给无状态小部件NumberInputField，该小部件是 的包装器TextFormField。但是，NumberInputField不会重建。

我也尝试过将key（UniqueKey()和ValueKey(_isAnswerCorrect.toString())）设置为NumberInputField，因为这个解决方案在另一个类似的场景中对我有用，但都没有起作用。

只需复制并粘贴下面的代码到 dartpad 中即可查看实际行为（这里不起作用）：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
  });

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isAnswerCorrect = false;

  Widget _questionForm = Container();

  final _formKey = GlobalKey<FormState>();

  void _answerIsCorrect() {
    setState(() {
      _isAnswerCorrect = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              child: Text('Show form'),
              onPressed: () {
                Future.delayed(
                  const Duration(milliseconds: 100),
                  () => setState(
                    () {
                      _questionForm = SizedBox(
                        width: 100,
                        child: Column(
                          children: [
                            Form(
                              key: _formKey,
                              child: NumberInputField(
                                isAnswerCorrect: _isAnswerCorrect,
                              ),
                            ),
                            SizedBox(height: 20),
                            ElevatedButton(
                              child: Text('Change Color?'),
                              onPressed: _answerIsCorrect,
                            ),
                          ],
                        ),
                      );
                    },
                  ),
                );
              },
            ),
            SizedBox(height: 20),
            _questionForm,
          ],
        ),
      ),
    );
  }
}

class NumberInputField extends StatelessWidget {
  final bool isAnswerCorrect;

  const NumberInputField({
    super.key,
    required this.isAnswerCorrect,
  });

  @override
  Widget build(BuildContext context) {
    Color fontColor = Colors.blue;

    if (isAnswerCorrect) {
      fontColor = Colors.black;
    }

    return TextFormField(
      style: TextStyle(color: fontColor),
      textAlign: TextAlign.center,
      decoration: InputDecoration(
        hintText: '?',
      ),
    );
  }
}

但是，我已经成功地以另一种形式做到了这一点，这种形式并不是仅在 Future 之后设置的（这里有效）（只需在 dartpad 中复制并粘贴下面的代码即可查看行为）：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
  });

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isAnswerCorrect = false;

  final _formKey = GlobalKey<FormState>();

  void _answerIsCorrect() {
    setState(() {
      print('setting state');
      _isAnswerCorrect = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              width: 100,
              child: Column(
                children: [
                  Form(
                    key: _formKey,
                    child: NumberInputField(
                      isAnswerCorrect: _isAnswerCorrect,
                    ),
                  ),
                  SizedBox(height: 20),
                  ElevatedButton(
                    child: Text('Change Color?'),
                    onPressed: _answerIsCorrect,
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class NumberInputField extends StatelessWidget {
  final bool isAnswerCorrect;

  const NumberInputField({
    super.key,
    required this.isAnswerCorrect,
  });

  @override
  Widget build(BuildContext context) {
    Color fontColor = Colors.blue;

    if (isAnswerCorrect) {
      fontColor = Colors.black;
    }

    return TextFormField(
      style: TextStyle(color: fontColor),
      textAlign: TextAlign.center,
      decoration: InputDecoration(
        hintText: '?',
      ),
    );
  }
}

我肯定忽略了一些非常琐碎的事情。有人知道为什么会这样吗？