代码

Question

有状态小部件必须自己更新/重建，如果父小部件更新，它也应该更新吗？

对此有什么解决方案。

我想实现一个测验应用程序。它有游戏测验小部件，根据问题索引显示视图测验或结果页面，这些索引都是使用提供程序获取的。

viewquiz 有问题文本和答案选项（有状态的小部件）。当我点击答案时，它会通知所有消费者。我可以使用 setstate 来更改颜色，但是当下一个问题出现时，如果我将颜色更改为蓝色，则颜色保持不变，然后它保持蓝色。现在的解决方案是使用计时器并使用 setstate 再次重置。

代码

这是我的解决方案。如果有人可以帮助我改进它。我觉得这不是最好的方法。

测验模型.dart

<table class="container">
  <tr>
    <td class="first" rowspan="2">
      <img width="300" height="400">
      <h3>Lorem ipsum dolor sit amet.</h3>
    </td>
    <td class="second">
      <img width="300" height="200">
      <h3>Lorem ipsum dolor sit amet.</h3>
    </td>
  </tr>
  <tr>
    <td class="third">
      <img width="300" height="200">
      <h3>Lorem ipsum dolor sit amet.</h3>
    </td>
  </tr>
</table>

playquiz.dart

class QuizModel extends ChangeNotifier {
  var questions;

  QuizModel(this.questions);

  var qindex = 0;
  var score = 0;
  void check(ans) {
    if (ans) {
      score = score + 1;
    }

    qindex = qindex + 1;
    notifyListeners();
  }
}

answer.dart

 return ChangeNotifierProvider<QuizModel>(
              create: (context) => QuizModel(snapshot.data),
              child: Scaffold(
                //appBar: AppBar(title: Text("nice app")),
                body: Consumer<QuizModel>(builder: (context, QuizModel, child) {
                  if (QuizModel.questions.length == 0) {
                    return Center(
                      child: Text("Loading..."),
                    );
                  } else {
                    print(snapshot.data);
                    // return Text("Ok");
                    return QuizModel.qindex < QuizModel.questions.length
                        ? ViewQuiz(QuizModel.questions, QuizModel.qindex)
                        : ViewResult(QuizModel.score);
                  }
                }),
              ),
            );

完整代码：

https://github.com/ishworgiri1999/quizel/tree/main/lib

Answer 1

有状态小部件无法自我更新，除非程序员指定必须在何处和何时更新它，调用 seState 方法。

父小部件仅在子小部件位于更新的父小部件的子树中时才重建子小部件。

小部件可以使用 setState 完全更新或部分更新，使用 Provider/Consumer 或 ValueListenableBuilder。

Answer 2

如果您熟悉状态管理，我会使用提供程序包。否则，如果它是一个较小的应用程序，您在其中没有全局状态（多个小部件之间共享的状态），您可以在应重建 UI 时调用 setState。仅当子小部件使用的状态发生更改时，UI 才会更新。

请提供一个简短的代码片段来重现您的情况。

父小部件更新时有状态的子小部件不更新

代码

2 个答案: