MVVM Design Pattern in Flattern

wir versuchen zu entwickeln, ein flattern app und wir erstellen eine stateful-widget als eine Seite .

wir möchten separaten build-Funktion von anderen Status-Variablen und state-Funktion in 2 unterschiedlichen Datei, die build-Funktion können Sie den Zugang zu this des Staates Klasse
wir erstellen eine Klasse : 

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

und erweitern Sie es in einer neuen Klasse, die den Zugriff auf PageClassState this variable
wir schreiben : 

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

aber in PageClassState wir eine Fehlermeldung erhalten, sagen wir überschreiben muss build-Methode in der Klasse . gibt es irgendeine Idee um das problem zu beheben und implementieren von MVVM Design pattern in flattern?

  • Sie können den Gültigkeitsbereich Modell statt.
InformationsquelleAutor javad bat | 2018-04-11
  1. 10

    Ich schlage vor, Sie bewegen Ihre ViewModel-code in einer separaten Klasse, die nicht verlängern State. Halten Sie das ViewModel unabhängig von der Plattform.
    Ihre Widgets Zustand kann eine Instanz der viewModel-und mit ihm interagieren.

    Finden Sie eine ausführlicheres Beispiel hier

    Wenn das Kind Widgets zugreifen zu können, müssen Sie Ihre ViewModel können Sie ein Widget Geerbt wie vorgeschlagen von @Rémi Rousselet.
    Ich habe schnell realisiert dies für Sie:

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

    Kind-widgets können schnappen Sie sich das ViewModel durch den Aufruf 

    var viewModel = ViewModelProvider.of(context);

    Lassen Sie mich wissen, wenn Sie Fragen haben 🙂

    • Wie können wir damit umgehen, eine app mit mehr als 50 ViewModels?
    InformationsquelleAutor JulianLenz
  2. 6

    Das ist nicht der richtige Ansatz. Sie sollten nicht split State<T> und es ist build Methode.
    Die Sache ist, nicht verlängern widgets. Sie Komponieren.

    Einen richtigen Weg zu erreichen, etwas ähnliches zu verwenden InheritedWidget. Diese halten Sie Daten, aber nichts anderes tun. Und es werden Kinder in der Lage sein, zu verlangen, diese Daten über eine MyInherited.of(context).

    Könnte man auch eine builder. So etwas wie :

    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);
  }
}
    InformationsquelleAutor Rémi Rousselet
  3. 0

    Den mvvm Paket, Ein Flattern MVVM (Model-View-ViewModel) Umsetzung. 

    import 'package:flutter/widgets.dart';
import 'package:mvvm/mvvm.dart';
import 'dart:async';

//ViewModel
class Demo1ViewModel extends ViewModel {

  Demo1ViewModel() {
      //define bindable property
      propertyValue<String>(#time, initial: "");
      //timer
      start();
  }

  start() {
      Timer.periodic(const Duration(seconds: 1), (_) {
        var now = DateTime.now();
        //call setValue
        setValue<String>(#time, "${now.hour}:${now.minute}:${now.second}");
      });
  }
}

//View
class Demo1 extends View<Demo1ViewModel> {
  Demo1() : super(Demo1ViewModel());

  @override
  Widget buildCore(BuildContext context) {
    return Container(
        margin: EdgeInsets.symmetric(vertical: 100),
        padding: EdgeInsets.all(40),

        //binding
        child: $.watchFor(#time, 
            builder: $.builder1((t) => 
              Text(t, textDirection: TextDirection.ltr))));
  }
}

//run
void main() => runApp(Demo1());

    vollständiges Beispiel

    InformationsquelleAutor unicreators
Schreibe einen Kommentar