Flutter 小部件中的视图和逻辑分离答案

【问题标题】：Separation of view and logic in flutter widgetFlutter 小部件中的视图和逻辑分离
【发布时间】：2022-10-03 01:01:44
【问题描述】：

我多年来一直在使用 C# 进行编程并使用 Pattern MVVM。

我想切换到 Flutter，但我有几个基本问题。我想从这里开始：

我只能找到在小部件内编程事件的示例。例如：

    onPressed: () {
      showDialog(
        context: context,
        builder: { context.
          return AlertDialog(
            // Retrieve the text that user has entered by using the
            // TextEditingController.
            content: Text(myController.text),
          );
        },
      );
    },

但我通常将视图与程序的逻辑分开。因此，因为那时编程清晰，程序的维护也容易得多。

Flutter 也是这样吗？如果是这样，代码会是什么样子（因为我还没有找到示例）。我以这样的方式想象它：

    onPressed: () {
          showDialog()
    },

方法：

static showDialog()
{
          showDialog(
            context: context,
            builder: (context) {
              return AlertDialog(
                // Retrieve the text that user has entered by using the
                // TextEditingController.
                content: Text(myController.text),
              );
            },
          );
}

标签： flutter

【解决方案1】：

一般来说你的方法是正确的，但是

onPressed: () {
   showDialog()
},

这里的问题是 showDialog() 依赖于 BuildContext context，它通常只在小部件内部可用。这里的context 用于创建AlertDialog。在这种情况下，除非您将上下文作为参数传递，否则实际上无法提取该 showDialog 方法。

因此，如果您要提取的方法以某种形式修改 UI（例如显示对话框），我会将其保留在那里。

但是对于其他所有事情，例如在按下按钮时从 API 获取数据，您可以提取该方法。

void fetchData() {
 ...
}

...
onPressed: fetchData, // same as '() => fetchData()'  or '() {fetchData();}'
...

在这里，您需要考虑如何在 UI 中获取数据。一旦获取数据，我可能会使用一个回调来更新小部件的状态。

【讨论】：