Flutter MVVM架构插件mvvm_architecture的使用

Flutter MVVM架构插件mvvm_architecture的使用

MVVM（Model-View-ViewModel）是一种流行的软件架构模式，它有助于分离应用程序的不同部分。本文将通过一个简单的示例展示如何在Flutter中使用mvvm_architecture插件来实现MVVM架构。

main.dart

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

import 'my_home_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 这个widget是你的应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // 应用的主题
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter MVVM Demo'),
      navigatorObservers: [routeObserver],
    );
  }
}

my_home_page.dart (ViewState)

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

part 'my_home_vm.dart';

class MyHomePage extends StatefulWidget {
  final String title;
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  [@override](/user/override)
  State<MyHomePage> createState() => MyHomePageState();
}

class MyHomePageState extends ViewState<MyHomePage, MyHomeViewModel> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // 使用从MyHomePage对象中获取的值来设置appbar标题
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '你已经按下了按钮次数：',
            ),
            Text(
              '${viewModel.counter}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: viewModel.incrementCounter,
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
    );
  }

  [@override](/user/override)
  MyHomeViewModel createViewModel() {
    return MyHomeViewModel(this);
  }
}

my_home_vm.dart (ViewModel)

part of 'my_home_page.dart';

class MyHomeViewModel extends ViewModel {
  MyHomeViewModel(super.viewState);

  int counter = 0;

  [@override](/user/override)
  void dispose() {}

  void incrementCounter() {
    counter++;

    viewState.setState(() {});
  }
}

更多关于Flutter MVVM架构插件mvvm_architecture的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter MVVM架构插件mvvm_architecture的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用MVVM架构插件mvvm_architecture可以帮助你更好地组织代码，实现关注点分离。以下是一个简要的示例，展示如何在Flutter项目中应用mvvm_architecture插件来实现MVVM架构。

首先，确保你已经在pubspec.yaml文件中添加了mvvm_architecture依赖：

dependencies:
  flutter:
    sdk: flutter
  mvvm_architecture: ^最新版本号  # 请替换为当前最新版本号

然后运行flutter pub get来安装依赖。

1. 创建ViewModel

ViewModel负责处理业务逻辑和数据绑定。

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

class CounterViewModel extends BaseViewModel {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // 通知视图更新
  }
}

2. 创建View（Widget）

View负责展示数据，并与ViewModel进行绑定。

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter_view_model.dart'; // 假设ViewModel文件名为counter_view_model.dart

class CounterView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final CounterViewModel model = 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(
              '${model.count}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: model.increment,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

3. 使用MultiProvider在应用顶层提供ViewModel

在应用顶层使用MultiProvider来提供CounterViewModel实例。

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'counter_view_model.dart';
import 'counter_view.dart'; // 假设View文件名为counter_view.dart

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => CounterViewModel()),
      ],
      child: MyApp(),
    ),
  );
}

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

总结

以上代码展示了如何在Flutter项目中使用mvvm_architecture插件实现一个简单的MVVM架构。通过创建ViewModel来处理业务逻辑和数据绑定，并在View中使用Provider来访问ViewModel，实现了关注点分离，使得代码更加清晰和易于维护。

请注意，mvvm_architecture插件本身可能提供了更多功能和最佳实践，这里仅展示了一个基本的实现。你可以查阅该插件的官方文档以获取更多详细信息和高级用法。

回到顶部