Flutter 模式对话框_github

代码

​https://github.com/macro6461/flutter_to_do​

参考

正文

如果你是从我以前的帖子来的,你看到我启动了我的待办事项应用程序,解决了我状态更新时不能用 ​​showModalBottomSheet​​​ 方法更新 ​​NewToDo​​ 的问题。

​https://api.flutter.dev/flutter/material/showModalBottomSheet.html​

在 Stack Overflow 上问了一个问题之后,我终于可以把我的 ​​NewToDo​​​ 小部件放到 ​​showModalBottomSheet​​​ ​​中了。这样,NewToDo​​​ 小部件只有在我单击 ​​FloatingActionButton​​ 时才可见,而不是必须一直可见。

然而,在实现这个目标后不久,我注意到我的应用程序中还有一个问题。

当我选择要编辑的 ​​ToDo​​​ 项目时,我希望能够重用我的 ​​NewToDo​​​。我认为这是有意义的,因为它是同样的两个输入,可以用来改变相同的两个状态值,​​title​​​ 和 ​​content​​。

问题是什么?

Flutter 模式对话框_sed_02

除了在我的 ​​FloatingActionButton​​ 小部件(绿色圆圈)的 ​​onPressed​​ 方法之外,我无法在任何地方执行 ​​showModalBottomSheet​​ (绿色箭头)。

我需要能够触发 ​​onPressed​​​ 方法,每当我点击编辑标题 ​​ElevatedButton​​​ 小部件(红色圆圈标记) ,每个 ​​ToDo​​ 项目。

我考虑了如何找到一种方法来模拟 ​​onPressed​​​ 事件,以便执行 ​​showmodbottomsheet​​ 回调。

由于无法模拟 ​​onPressed​​ 事件(and frustrated) ,我带着 Stack Overflow 去看看是否有其他人对如何实现我所寻找的目标有任何想法。

过了一会儿,我得到了答案。我松了一口气... ... 也谦卑起来。

Flutter 模式对话框_sed_03

如此简单... 如此纯洁

我采纳了 eimmer’s 的建议,没有把我的 ​​showModalBottomSheet​​​ 放在 ​​onPressed​​​ 方法中,而是把它分解成了它自己的函数 ​​renderShowModal​​。参见下文:

_renderShowModal(){
  return showModalBottomSheet<void>(
    context: context,
    builder: (BuildContext context) {
      return ValueListenableBuilder(
        valueListenable: titleController,
        builder: (context, _content, child) {
          return NewToDo(titleController, contentController, _addTodo, _clear, _todo);
        });
    },
  );
}

这样做之后,我就可以重写我的 ​​onPressed​​ 方法了。

onPressed: _renderShowModal,

现在我们已经把我们的 ​​showModalBottomSheet​​ 放在单独的函数中,让我们看看它是否工作:

Flutter 模式对话框_sed_02

太棒了!我们现在需要做的就是在 ​​editTodo​​​ 函数的末尾调用相同的函数,当你点击编辑 ​​EelevatedButton​​ 时,这个函数就会被调用。

void _editTodo(ToDo todoitem){
  setState(() {
    _todo = todoitem;
    content = todoitem.content;
    title = todoitem.title;
  });
  contentController.text = todoitem.content;
  titleController.text = todoitem.title;
  _renderShowModal();
}

现在让我们看看当我们单击 ​​ToDo​​​ 项目旁边的 ​​edit​​ 时它是否工作。

Flutter 模式对话框_github_05

Viola! 维奥拉

我们现在可以使用 ​​NewToDo​​​ 来创建新的 ​​ToDo​​​ 项目和编辑现有的 ​​ToDo​​ 项目。

通过将 ​​showModalBottomSheet​​​ 包装在一个单独的函数中,我们可以通过调用 ​​renderShowModal​​​,让我们的应用程序在任何时候都可以呈现 ​​NewToDo​​​ invoking ​​_renderShowModal​​。

这个应用的所有代码都在 GitHub 上。