首页 文章

Flutter中的MVVM设计模式

提问于
浏览 次
2

我们尝试开发一个颤动的应用程序，我们创建一个状态小部件作为页面 .
我们要构建的功能从其他状态变量和状态功能，在构建函数可以访问到 this 我们创建一个类状态类的2个不同的文件分开：

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

并在可访问 PageClassState 我们写 this 变量的新类扩展它：

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

但是在 PageClassState 中我们得到一个错误，说我们必须覆盖类中的构建方法 . 是否有任何建议来解决问题并在flutter中实现MVVM设计模式？

android mvvm flutter

3 回答

  • 6

    这's not the proper approach. You shouldn'牛逼分裂 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);
  }
}
    回复于
  • 3

    我是新来扑，并一直在寻找一个优雅的n层的图案，这并不对性能牺牲（或可以很容易地性能调整） . 有一个关于谷歌开发者 Channels 的视频，这将有助于您了解集团模式（2个其它图案/架构进行了说明）video link这是接近MVVM模式 . 有通过快鸟工作室的一篇文章，它利用的是什么视频乡亲流做，并演示了一个无MVVM模式，link to article . 我知道这's a diversion from the issue you are facing, but it'值得为之看，特别是如果你正在寻找实现扑的MVVM模式，不误使用扑的香草功能 .

    回复于
  • -1

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

    你可以找到more detailed example here

    如果孩子小工具需要访问您的视图模型，你可以使用一个继承的Widget通过@雷米Rousselet的建议 . 我很快就实现了这个给你：

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

    让我知道如果您有任何疑问:)

    回复于

相关问题