Flutter中的MVVM设计模式

Question

我们尝试开发一个颤动的应用程序,我们创建一个状态小部件作为页面.
我们要在两个不同的文件中将构建函数与其他状态变量和状态函数分开,构建函数可以访问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平台独立.您的窗口小部件状态可以具有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);

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

Answer 2

那不是正确的方法。你不应该分裂State<T>，这是build方法。关键是，不要扩展小部件。组成它们。

实现类似目的的正确方法是使用InheritedWidget。这些将保留您的数据，但无所作为。而且孩子可以使用来请求这些数据MyInherited.of(context)。

您也可以创建一个builder。就像是 ：

typedef Widget MyStateBuilder(BuildContext context, MyStateState state);

class MyState extends StatefulWidget {
  final MyStateState builder;

  const MyState({this.builder}) : assert(builder != null);

  @override
  MyStateState createState() => new MyStateState();
}

class MyStateState extends State<MyState> {
  String name;

  @override
  Widget build(BuildContext context) {
    return widget.builder(context, this);
  }
}