Flutter MVVMFlutter 的 Model-View-ViewModel 實現(xiàn)

一個 Flutter 的 MVVM(Model-View-ViewModel) 實現(xiàn)， 它使用基于屬性 (property) 的數(shù)據(jù)綁定在視圖模型 (ViewModel) 與視圖 (View) 之間建立關(guān)聯(lián)，并通過視圖模型 (ViewModel) 驅(qū)動視圖 (View) 變化。以此簡化 Flutter 開發(fā)過程中繁重的狀態(tài)管理與 widget 樹控制。

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

// define ViewModel
class Demo1ViewModel extends ViewModel {
  Demo1ViewModel() {
    // define bindable property
    property<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}");
      });
  }
}

// define 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());