Flutter插件vmobject的使用方法

Flutter插件vmobject的使用方法

在本篇文章中，我们将探讨一个名为 vmobject 的 Flutter 插件。该插件基于 MVVM（Model-View-ViewModel）模式，并提供了用于构建 Flutter 应用程序的基础类。通过使用这些基础类，我们可以更方便地管理状态和用户界面。

类结构

ObserverWidget

ObserverWidget 是一个自动重建的小部件，每次其可观察对象发生变化时都会重新构建。

// 定义可观察对象
final count = Observable(0);

// 在构建上下文中使用
ObserverWidget(
    observable: count,
    builder: (context, int value) => Text('$value')
)

该小部件依赖于 obsobject 库。

ObserverFormField

ObserverFormField 是一个小部件，用于输入可观察对象的值。它可以用于 String, int, double, DateTime 等类型。

// 定义可观察对象
final name = Observable('');

// 在构建上下文中使用
ObserverFormField(
    observable: name,
    formatter: ...,// 可选
    // 其他 TextField 的选项
)

此输入字段具有 formatter 属性，用于在用户输入时格式化/解析值。默认情况下，它为 int, double, DateTime 提供推荐属性。

内置一些格式化类：

• NumberTextFormatter: 用于格式化 Observable<int> 和 Observable<double> 的数字。
• DateTimeFormatter: 用于格式化 Observable<DateTime> 的日期时间。
• MaskTextFormatter: 用于类似掩码输入的功能。

ViewModel

ViewModel 是视图模型层的基础类。

class HomeModel extends ViewModel {
    // 其他内容...
}

在某些地方，你可以使用 ViewModel.of 来获取已经创建的对象。

final home = ViewModel.of<HomeModel>();

生命周期事件调用以下函数，你可以在这些函数中重写以处理一些事情（订阅、创建计算对象、获取数据等）：

• activate: 在渲染小部件之前调用
• dispose: 在小部件移除后调用

ViewWidget

ViewWidget 是视图层的基础类。需要覆盖两个方法：initModel 和 builder。

默认情况下，视图模型仅初始化一次并缓存。你可以通过将 cacheModel 属性设置为 false 来忽略使用缓存视图模型（例如登录视图）。

class HomeView extends ViewWidget<HomeModel> {
    [@override](/user/override)
    HomeModel initModel() => HomeModel();

    [@override](/user/override)
    Widget builder(BuildContext context, HomeModel model) {
        // 返回小部件
    }
}

示例代码

下面是一个完整的示例，展示了如何使用 vmobject 插件来构建一个简单的 Flutter 应用程序。

// 忽略对于文件的打印警告
import 'package:flutter/material.dart';
import 'package:vmobject/vmobject.dart';

void main() {
  runApp(const MaterialApp(home: HomeView()));
}

class HomeModel extends ViewModel {
  final Observable<int> count = Observable<int>(1);
  final Observable<int> a = Observable(0);
  final Observable<double> b = Observable(0);
  final Observable<double?> c = Observable(null);
  final Observable<String> d = Observable(
    '',
    validator: ValidatorLeast([ValidatorRequired(), ValidatorEmail()]),
  );
  final Observable<DateTime> e = Observable(DateTime(2021, 1, 4));
  final Observable<DateTime?> f = Observable(null);
  final Observable<String> g = Observable('');
  final Observable<DateTime> h = Observable(DateTime.now());
  final Observable<int?> i = Observable(null, validator: ValidatorRequired());

  [@override](/user/override)
  void activate() {
    super.activate();
    a.changed(() => print('int: $a'));
    b.changed(() => print('double: $b'));
    c.changed(() => print('double?: $c'));
    d.changed(() => print('string: $d'));
    e.changed(() => print('DateTime: $e'));
    f.changed(() => print('DateTime?: $f'));
    g.changed(() => print('Mask: $g'));
    h.changed(() => print('Mask: $h'));
  }

  void add() {
    count.value++;
  }
}

class HomeView extends ViewWidget<HomeModel> {
  const HomeView({Key? key}) : super(key: key);

  [@override](/user/override)
  HomeModel initModel() => HomeModel();

  [@override](/user/override)
  Widget builder(BuildContext context, HomeModel model) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('我的应用'),
      ),
      body: Center(
        child: ListView(
          children: [
            const Text(
              '您已经按下了按钮很多次：',
            ),
            ObserverWidget(
              observable: model.count,
              builder: (context, int value) => Text(
                '$value',
                style: Theme.of(context).textTheme.headline4,
              ),
            ),
            ObserverFormField(
              observable: model.a,
              decoration: const InputDecoration(labelText: '整数'),
            ),
            ObserverFormField(
              observable: model.b,
              decoration: const InputDecoration(labelText: '双精度'),
            ),
            ObserverFormField(
              observable: model.c,
              decoration: const InputDecoration(labelText: '双精度？'),
            ),
            ObserverFormField(
              observable: model.d,
              decoration: const InputDecoration(labelText: '电子邮件'),
            ),
            ObserverFormField(
              observable: model.e,
              decoration: const InputDecoration(labelText: '日期时间'),
            ),
            ObserverFormField(
              observable: model.f,
              decoration: const InputDecoration(labelText: '日期时间？'),
            ),
            ObserverFormField(
              observable: model.g,
              decoration: const InputDecoration(labelText: '掩码'),
              formatter: MaskTextFormatter(mask: '0000-####-####'),
            ),
            ObserverFormField(
              observable: model.h,
              decoration: const InputDecoration(labelText: '完整日期时间'),
              formatter: DateTimeFormatter<DateTime>(
                  type: DateTimeFormatterType.dateFullTime),
            ),
            ObserverFormField(
              observable: model.i,
              decoration: const InputDecoration(labelText: '必填数字'),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          model.add();
        },
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
    );
  }
}