android - Flutter 中的 MVVM 设计模式

Question

我们尝试开发一个 Flutter 应用，并创建一个有状态的小部件作为页面。
我们想将构建函数与其他状态变量和状态函数分离在 2 个不同的文件中，构建函数可以访问状态类的 this 我们创建一个类:

PageClassState extend State<PageClass>{
    string value = 'string value';
}

并将其扩展为可以访问 PageClassState this 变量的新类 我们写:

PageClassView extend PageClassState{
    @override
    Widget Build(){
      return(new Text(this.value))
    }
} 

但是在 PageClassState 我们得到一个错误，说我们必须覆盖类中的构建方法。有什么建议可以解决这个问题并在 Flutter 中实现 MVVM 设计模式？

Answer 1

我建议将您的 ViewModel 代码移动到不扩展 State 的单独类中。保持 ViewModel 平台独立。 您的 Widgets 状态可以具有 viewModel 的实例并与之交互。

您可以找到 more detailed example here

如果子 Widget 需要访问您的 ViewModel，您可以使用 @Rémi Rousselet 建议的 Inherited Widget。 我很快就为你实现了这个:

class ViewModelProvider extends InheritedWidget {
  final ViewModel viewModel;

  ViewModelProvider({Key key, @required this.viewModel, Widget child}) 
  : super(key: key, child: child);

  @override
  bool updateShouldNotify(InheritedWidget oldWidget) => true;

  static ViewModel of(BuildContext context) =>
      (context.inheritFromWidgetOfExactType(ViewModelProvider) as 
  ViewModelProvider).viewModel;
}

子部件可以通过调用获取 ViewModel

var viewModel = ViewModelProvider.of(context);

如果您有任何问题，请告诉我:)