在 Flutter 中使用条件选择不同的小部件集

Posted 2023-02-23

【中文标题】在 Flutter 中使用条件选择不同的小部件集

【英文标题】：Using conditional to select different set of widgets in Flutter

【发布时间】：2020-11-28 08:39:48

【问题描述】：

我正在关注 Angela Yu 的 Flutter 入门课程，并扩展 Quizzler 项目以应对个人挑战。在测验结束时，我让用户有机会重新开始（显示第一个问题屏幕）或结束游戏（显示“再见”屏幕）。我有这个基本结构：

class _QuizPageState extends State<QuizPage> 
  Widget selectContents() 
    // getGameState() reads a boolean flag; false means user is quitting
    // but a change from true to false is only detected
    // when main.dart is saved in the IDE.
    print('Game State: --------> $quizBrain.getGameState()');
    return (quizBrain.getGameState()) ? QuizContents() : GoodbyeScreen();
  

  @override
  Widget build(BuildContext context) 
    return Container(
      child: selectContents(),
    );
  

这不起作用。当用户选择结束测验时，选择不会注册并且QuizContents 的最后一个屏幕仍然可见。当我进入 IDE 并简单地保存 main.dart 时，标志会以某种方式更新（并且 print 语句现在报告游戏状态的正确值）并且 GoodbyeScreen() 出现在模拟器中。

这个问题在 *** 上有很多版本和建议。我已经尝试了here和here的所有解决方案，包括：

将三元运算符作为子项直接放入Container 使用Builder 小部件而不是Container 在_QuizPageState的build()方法的内部和外部放置selectContents()函数 在匿名函数中使用if/else 级联作为Container 的子函数 ...等

这些都不起作用，行为保持不变。

【参考方案1】：

这是一个状态管理问题。您还没有包含 quizBrain 的保存位置，但如果它在 _QuizPageState 中，则在更改布尔标志时调用 setState 应该可以解决问题，否则永远不会重建小部件。

保存在 IDE 中更新值的原因是 Flutter 执行热重载并重建一些（可能是全部）小部件。

除了setState，还有很多其他的状态管理方法。一个有趣的阅读是Simple app state management。您的选择取决于您的应用程序的复杂性，但我想在这种情况下，setState 应该足够了。