setState 未在 Flutter 中更新 UI

Question

我有一个对话框，它是一个有状态的小部件，在 Animated Switcher 中包含多个选项卡。在它里面我有一个按钮，点击它会调用一个函数 switchPage()，它有一个 switch 语句，每个 case 都将 Widget? currentTab 变量的状态设置为不同的状态。当我使用此 switchPage() 函数将 currentTab 的值更改为不同的小部件时，问题就出现了，该小部件也包含在不同的方法中 getWidget2()

代码为 Example on DartPad

尝试按照我的建议点击...

单击浮动按钮。
点击第一个复选框。
现在点击 PAGE 2 按钮。
仅单击第二个复选框一次。现在请注意复选框在单击时不起作用。
再次单击 PAGE 1 以转到工作复选框。
现在再次点击 PAGE 2 按钮。 Checkbox 的值和状态确实发生了变化，但没有在单击时更新，但是当我们强制重新访问该复选框时它已经更新了。

我在任何地方都找不到解决方案，我真的需要尽可能优化代码结构。拜托，如果有人有任何解释或任何建议，将不胜感激..

提前致谢。

Answer 1

这是一个非常粗略的工作示例，但您可以在此基础上进行构建。在下面的代码中，您可以看到我创建了两个方法来处理为每个小部件设置复选框的状态。触发此方法后，我还重置了页面。它的作用是触发内部小部件的重绘（这是我在评论中解释的内容）。

    class _DemoDialogState extends State<DemoDialog> {
    Widget? currentTab;

    bool valueOfCheckbox1 = false;
    bool valueOfCheckbox2 = false;

    void switchPage(name) {
    switch (name) {
      case 1:
        setState(() {
          currentTab = getWidget1(setCheckbox1State);  // <---- Notice the change here
        });
        break;

      case 2:
        setState(() {
          currentTab = getWidget2(setCheckbox2State);  // <---- Notice the change here
        });
        break;
      }
    }
  
    void setCheckbox1State(bool? newState) {
    if (newState != null) {
       setState(() {  // <---- Notice the change here
        valueOfCheckbox1 = newState;
         currentTab = getWidget1(setCheckbox1State);
      });
    }
    
   }
  
    void setCheckbox2State(bool? newState) {
      if (newState != null) {
       setState(() {  // <---- Notice the change here
        valueOfCheckbox2 = newState;
         currentTab = getWidget2(setCheckbox2State);
      });
     }
    }

  

    Widget getWidget1(Function(bool?) checkboxFunction) {
        return Container(
            child: Row(
          children: [
            Text('Hello from widget 1'),
            Checkbox(
                value: valueOfCheckbox1,
                onChanged: (value) {  // <---- Notice the change here
                  checkboxFunction(value);
                })
          ],
        ));
      }
    
      Widget getWidget2(Function(bool?) checkboxFunction) {
        return Container(
            child: Row(
          children: [
            Text('Hello from widget 2'),
            Checkbox(
                value: valueOfCheckbox2,
                onChanged: (value) {  // <---- Notice the change here
                  checkboxFunction(value);
                })
          ],
        ));
      }

      @override
       Widget build(BuildContext context) {
    return Dialog(
      child: Container(
        width: 280,
        height: 600,
        color: Colors.white,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            AnimatedSwitcher(
              duration: Duration(milliseconds: 250),
              reverseDuration: Duration(milliseconds: 250),
              transitionBuilder: (child, animation) {
                var begin = Offset(0.5, 0);
                var end = Offset.zero;
                var curve = Curves.easeIn;
                var tween = Tween(begin: begin, end: end)
                    .chain(CurveTween(curve: curve));

                var begin2 = 0.0;
                var end2 = 1.0;
                var curve2 = Curves.easeIn;
                var tween2 = Tween(begin: begin2, end: end2)
                    .chain(CurveTween(curve: curve2));

                return SlideTransition(
                  position: animation.drive(tween),
                  child: FadeTransition(
                      opacity: animation.drive(tween2), child: child),
                );
              },
              layoutBuilder: (widget, list) {
                return Align(
                  alignment: Alignment.topCenter,
                  child: widget,
                );
              },  // <---- Notice the change here
              child: currentTab == null ? getWidget1(setCheckbox1State) : currentTab,
            ),
            TextButton(
                onPressed: () {
                  switchPage(1);
                },
                child: Text('PAGE 1')),
            TextButton(
                onPressed: () {
                  switchPage(2);
                },
                child: Text('PAGE 2'))
          ],
        ),
      ),
    );
  }
}

这只是一个使事情正常进行的示例，但它绝不代表您应该如何适当地构建事情。我会考虑将代码分成无状态和有状态的小部件。

setState 未在 Flutter 中更新 UI

setState is not updating UI in Flutter

flutter

dart

flutter-state