Flutter 中 MVVM架构

MVVM（Model-View-ViewModel）是一种常见的软件架构模式，特别适用于UI开发。它将UI（View）与业务逻辑（ViewModel）和数据模型（Model）分离，从而提高代码的可维护性和可测试性。在Flutter中，实现MVVM架构可以使用各种状态管理工具，如Provider、Riverpod、Bloc等。下面详细介绍MVVM架构的概念并提供示例代码。

MVVM 架构概述

• Model: 负责应用程序的数据和业务逻辑。它只包含纯粹的数据结构和数据处理方法，不包含任何UI相关的代码。
• View: 负责呈现数据，并将用户交互事件传递给ViewModel。它通常由Flutter的Widget树表示。
• ViewModel: 负责处理业务逻辑，将Model和View连接起来。它接收View的输入，操作Model，并将结果传递回View。

实现MVVM架构

我们将使用Provider来实现一个简单的MVVM架构示例，演示如何在Flutter中使用这种架构。

1. 创建Model

创建一个简单的Model类，用于表示和操作数据。

class CounterModel {
  int _counter = 0;

  int get counter => _counter;

  void increment() {
    _counter++;
  }
}

2. 创建ViewModel

创建一个ViewModel类，负责处理业务逻辑并与Model交互。

import 'package:flutter/foundation.dart';
import 'package:flutter_mvvm_example/models/counter_model.dart';

class CounterViewModel extends ChangeNotifier {
  final CounterModel _counterModel;

  CounterViewModel(this._counterModel);

  int get counter => _counterModel.counter;

  void incrementCounter() {
    _counterModel.increment();
    notifyListeners();
  }
}

3. 创建View

创建View并使用Provider来管理状态。

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:flutter_mvvm_example/viewmodels/counter_viewmodel.dart';
import 'package:flutter_mvvm_example/models/counter_model.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CounterViewModel(CounterModel()),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter MVVM Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterViewModel = Provider.of<CounterViewModel>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter MVVM Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              '${counterViewModel.counter}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: counterViewModel.incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

目录结构

为了更清晰地组织代码，可以按照以下目录结构来组织文件：

lib/
├── main.dart
├── models/
│   └── counter_model.dart
├── viewmodels/
│   └── counter_viewmodel.dart
└── views/
    └── my_home_page.dart

完整示例代码

lib/models/counter_model.dart

class CounterModel {
  int _counter = 0;

  int get counter => _counter;

  void increment() {
    _counter++;
  }
}

lib/viewmodels/counter_viewmodel.dart

import 'package:flutter/foundation.dart';
import '../models/counter_model.dart';

class CounterViewModel extends ChangeNotifier {
  final CounterModel _counterModel;

  CounterViewModel(this._counterModel);

  int get counter => _counterModel.counter;

  void incrementCounter() {
    _counterModel.increment();
    notifyListeners();
  }
}

lib/views/my_home_page.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../viewmodels/counter_viewmodel.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counterViewModel = Provider.of<CounterViewModel>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter MVVM Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            Text(
              '${counterViewModel.counter}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: counterViewModel.incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

lib/main.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'viewmodels/counter_viewmodel.dart';
import 'models/counter_model.dart';
import 'views/my_home_page.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CounterViewModel(CounterModel()),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter MVVM Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

通过这种方式，我们将数据和业务逻辑与UI分离，极大地提高了代码的可维护性和可测试性。这是一个简单的MVVM示例，实际应用中可能会涉及更多复杂的业务逻辑和数据处理，可以根据需要扩展和调整。