flutter - setState 似乎在构建器函数中不起作用

Question

setState 实际上是如何工作的？

当构建器函数中构建了本应重建的 Widget 时，它似乎没有做我期望的事情。我目前遇到的问题是 ListView.builder 和 AlertDialog 中的按钮。

此处的按钮之一是“AutoClean”，它会自动从对话框中显示的列表中删除某些项目。

注意:此处的目的是显示带有将提交的“工作”列表的确认。这些作业被标记以显示哪些作业似乎无效。用户可以返回更新参数，或按“自动清除”删除无效的参数。

onTap 按钮看起来像这样:

    GeneralButton(
      color: Colors.yellow,
      label: 'Clear Overdue',
      onTap: () {
        print('Nr of jobs BEFORE: ${jobQueue.length}');

        for (int i = jobQueue.length - 1; i >= 0; i--) {
          print('Checking item at $i');
          Map task = jobQueue[i];
          if (cuttoffTime.isAfter(task['dt'])) {
            print('Removing item $i');
            setState(() {                             // NOT WORKING
              jobQueue = List<Map<String, dynamic>>.from(jobQueue)
                ..removeAt(i);                        // THIS WORKS
            });

          }
        }

        print('Nr of jobs AFTER: ${jobQueue.length}');
        updateTaskListState();                        // NOT WORKING 
        print('New Task-list state: $taskListState');
      },
    ),

其中 jobQueue 用作构建 ListView 的源。

updateTaskListState 看起来像这样:

  void updateTaskListState() {
    DateTime cuttoffTime = DateTime.now().add(Duration(minutes: 10));
    if (jobQueue.length == 0) {
      setState(() {
        taskListState = TaskListState.empty;
      });
      return;
    }
    bool allDone = true;
    bool foundOverdue = false;
    for (Map task in jobQueue) {
      if (task['result'] == null) allDone = false;
      if (cuttoffTime.isAfter(task['dt'])) foundOverdue = true;
    }
    if (allDone) {
      setState(() {
        taskListState = TaskListState.done;
      });
      return;
    }
    if (foundOverdue) {
      setState(() {
        taskListState = TaskListState.needsCleaning;
      });
      return;
    }
    setState(() {
      taskListState = TaskListState.ready;
    });
  }

TaskListState 只是一个枚举，用于决定作业队列是否已准备好提交。

一旦 taskListState 设置为 TaskListState.ready，“提交”按钮应该会激活。 AlertDialog 按钮行使用 taskListState，如下所示:

  Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[
      if (taskListState == TaskListState.ready)
        ConfirmButton(
            onTap: (isValid && isOnlineNow)
                ? () {
                  postAllInstructions().then((_) {
                    updateTaskListState();
                    // navigateBack();
                  });
                : null),

从控制台输出我可以看到这正在发生，但它不工作。它似乎与同一问题有关。

当我使用 build 中的简单小部件树构建所有小部件时，我似乎没有遇到此类问题。但在这种情况下，我无法更新对话框的显示以显示没有删除项目的新列表。

这篇文章越来越长，但在 AleryDialog 中的 ListView 构建器看起来像这样:

  Flexible(
    child: ListView.builder(
      itemBuilder: (BuildContext context, int itemIndex) {
        DateTime itemTime = jobQueue[itemIndex]['dt'];
        bool isPastCutoff = itemTime.isBefore(cuttoffTime);
        return Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            Text(
              userDateFormat.format(itemTime),
              style: TextStyle(
                color:
                    isPastCutoff ? Colors.deepOrangeAccent : Colors.blue,
              ),
            ),
            Icon(
              isPastCutoff ? Icons.warning : Icons.cached,
              color: isPastCutoff ? Colors.red : Colors.green,
            )
          ],
        );
      },
      itemCount: jobQueue.length,
    ),
  ),

但由于带有按钮的 Row() 也不对 setState 使用react，我怀疑问题出在构建器函数本身。

FWIW 所有代码，除了像“GeneralButton”这样的一些样板小部件，都位于屏幕的 State 类中。

我的直觉是，这与 jobQueue 未传递给任何小部件这一事实有关。 builder 函数引用 jobQueue[itemIndex]，它直接访问 jobQueue 属性。

我可能会尝试将 AlertDialog 提取到外部 Widget 中。这样做意味着它只能在传递给 Widget 的构造函数时访问 jobQueue....

Answer 1

由于您写的是在使用对话框时发生这种情况，这可能是您问题的原因:

https://api.flutter.dev/flutter/material/showDialog.html

因此，对话框内的 setState 调用不会触发对话框内容所需的 UI 重建。如 API 中所述，在另一个 context 中实现重建的一种简短而简单的方法是使用 StatefulBuilder 小部件:

showDialog(
    context: context,
    builder: (dialogContext) {
      return StatefulBuilder(
        builder: (stateContext, setInnerState) {
          // return your dialog widget - Rows in ListView in Container
          ...
          // call it directly as part of onTap of a widget of yours or
          // pass the setInnerState down to another widgets
          setInnerState((){
            ...
          })

    }
);

编辑

与编程世界中的几乎所有情况一样，有各种方法来处理 setInnerState 调用以更新对话框 UI。这在很大程度上取决于您决定如何管理数据流/管理和逻辑分离的一般方式。作为示例，我使用您的 GeneralButton 小部件(假设它是一个 StatefulWidget):

class GeneralButton extends StatefulWidget {
  // all your parameters
  ...
  // your custom onTap you provide as instantiated
  final VoidCallback onTap;

  GeneralButton({..., this.onTap});

  @override
  State<StatefulWidget> createState() => _GeneralButtonState();
}

class _GeneralButtonState extends State<GeneralButton> {
  ...
  @override
  Widget build(BuildContext context) {
    // can be any widget acting as a button - Container, GestureRecognizer...
    return MaterialButton(
      ...
      onTap: {
        // your button logic which has either been provided fully
        // by the onTap parameter or has some fixed code which is
        // being called every time
        ...
        // finally calling the provided onTap function which has the
        // setInnerState call!
        widget.onTap();
      },
    );
  }

如果你的 GeneralButton 小部件没有固定的逻辑，你可以这样写:onTap: widget.onTap

这将导致按如下方式使用您的 GeneralButton:

...
GeneralButton(
  ...
  onTap: {
    // the desired actions like provided in your first post
    ...
    // calling setInnerState to trigger the dialog UI rebuild
    setInnerState((){});
  },
)