Flutter中的MVVM设计模式

一尘不染

Flutter中的MVVM设计模式

flutter

我们尝试开发一个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出现错误时说必须在类中重写build方法。有什么建议可以解决问题并在抖动中实现MVVM设计模式？

阅读 1724

2020-08-13

共1个答案

一尘不染

我建议将ViewModel代码移到一个不会扩展的单独的类中State。保持ViewModel平台独立。您的窗口小部件状态可以具有viewModel的实例并与之交互。

您可以在此处找到更详细的示例

如果子窗口小部件需要访问您的ViewModel，则可以使用@RémiRousselet建议的继承的窗口小部件。我很快为您实现了这一点：

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);

有任何问题请告诉我:)

2020-08-13