Dart与Flutter教程 MVVM架构实践

Dart与Flutter教程中的MVVM（Model-View-ViewModel）架构实践是一种常用的设计模式，用于分离UI逻辑与业务逻辑。MVVM架构的核心思想是将视图（View）与数据（Model）通过ViewModel进行绑定，从而实现松耦合。

1. MVVM架构的组成部分

• Model: 负责数据的管理和业务逻辑。
• View: 负责UI的展示和用户交互。
• ViewModel: 作为View和Model之间的桥梁，负责处理UI逻辑，并将数据从Model传递到View。

2. 实践步骤

2.1 创建Model

class User {
  String name;
  int age;

  User({required this.name, required this.age});
}

2.2 创建ViewModel

ViewModel通常使用ChangeNotifier来通知View数据的变化。

import 'package:flutter/material.dart';

class UserViewModel extends ChangeNotifier {
  User _user = User(name: 'John', age: 25);

  User get user => _user;

  void updateUser(String name, int age) {
    _user = User(name: name, age: age);
    notifyListeners();
  }
}

2.3 创建View

View使用Provider来获取ViewModel实例，并监听数据变化。

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

class UserView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final viewModel = Provider.of<UserViewModel>(context);

    return Scaffold(
      appBar: AppBar(title: Text('MVVM Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Name: ${viewModel.user.name}'),
            Text('Age: ${viewModel.user.age}'),
            ElevatedButton(
              onPressed: () {
                viewModel.updateUser('Jane', 30);
              },
              child: Text('Update User'),
            ),
          ],
        ),
      ),
    );
  }
}

2.4 在main.dart中初始化

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'user_view.dart';
import 'user_view_model.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: UserView(),
    );
  }
}

3. 总结

通过MVVM架构，你可以将UI逻辑与业务逻辑分离，使代码更易于维护和测试。Dart和Flutter提供了强大的工具（如ChangeNotifier和Provider）来简化这一过程。