Flutter MVVM架构插件riverpod_mvvm的使用

Flutter MVVM架构插件riverpod_mvvm的使用

开始使用

本项目是一个新的Flutter项目，专注于MVVM架构，并使用了riverpod_mvvm插件来简化开发流程。该插件提供了平台特定的实现代码，适用于Android和iOS。

对于想要开始使用Flutter进行开发的朋友，可以参考以下资源：

• Flutter官方文档，其中包含了教程、示例代码以及移动应用开发指南和完整的API引用。

示例代码

以下是一个简单的示例，展示了如何使用riverpod_mvvm插件来构建一个具有MVVM架构的应用。

import 'package:flutter/material.dart';
import 'package:riverpod_mvvm/riverpod_mvvm.dart';
import 'package:riverpod_mvvm_example/second_page.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(
    const ProviderScope(
      child: MaterialApp(
        home: MyApp(),
      ),
    ),
  );
}

class MyApp extends StatefulView<MyAppViewModel, int> {
  const MyApp({super.key});

  @override
  ViewState<MyAppViewModel, int> createState() => _MyAppState();
}

class _MyAppState extends ViewState<MyAppViewModel, int> with MyAppUiActions {
  @override
  initViewModel() {}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: InkWell(
          onTap: () {
            read.moveToSecond();
          },
          child: const Icon(Icons.exit_to_app_sharp),
        ),
        title: const Text('示例'),
      ),
      body: Center(
        child: Text(
          '$watch',
          style: const TextStyle(fontSize: 32),
        ),
      ),
      floatingActionButton: FloatingActionButton.large(
        onPressed: () {
          read.increase();
        },
        child: const Icon(Icons.add),
      ),
    );
  }

  @override
  MyAppViewModel get read => ref.read(myAppViewModel.notifier);

  @override
  int get watch => ref.watch(myAppViewModel);

  @override
  moveToSecondPage() {
    Navigator.of(context)
        .push(MaterialPageRoute(builder: (context) => const SecondPage()));
  }
}

mixin MyAppUiActions {
  moveToSecondPage();
}

final myAppViewModel = StateNotifierProvider<MyAppViewModel, int>((ref) => MyAppViewModel(0));

class MyAppViewModel extends StateNotifier<int> with ViewModel<MyAppUiActions> {
  MyAppViewModel(super.state);

  increase() {
    state++;
  }

  moveToSecond() {
    state = 0;
    uiActions.moveToSecondPage();
  }
}

代码解释

1. main函数:

   void main() {
     WidgetsFlutterBinding.ensureInitialized();
   
     runApp(
       const ProviderScope(
         child: MaterialApp(
           home: MyApp(),
         ),
       ),
     );
   }
   

   这里初始化了WidgetsFlutterBinding并设置了MaterialApp的初始页面为MyApp。

2. MyApp类:

   class MyApp extends StatefulView<MyAppViewModel, int> {
     const MyApp({super.key});
   
     @override
     ViewState<MyAppViewModel, int> createState() => _MyAppState();
   }
   

   MyApp继承自StatefulView，定义了一个状态管理器_MyAppState。

3. _MyAppState类:

   class _MyAppState extends ViewState<MyAppViewModel, int> with MyAppUiActions {
     @override
     initViewModel() {}
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           leading: InkWell(
             onTap: () {
               read.moveToSecond();
             },
             child: const Icon(Icons.exit_to_app_sharp),
           ),
           title: const Text('示例'),
         ),
         body: Center(
           child: Text(
             '$watch',
             style: const TextStyle(fontSize: 32),
           ),
         ),
         floatingActionButton: FloatingActionButton.large(
           onPressed: () {
             read.increase();
           },
           child: const Icon(Icons.add),
         ),
       );
     }
   
     @override
     MyAppViewModel get read => ref.read(myAppViewModel.notifier);
   
     @override
     int get watch => ref.watch(myAppViewModel);
   
     @override
     moveToSecondPage() {
       Navigator.of(context)
           .push(MaterialPageRoute(builder: (context) => const SecondPage()));
     }
   }
   

   _MyAppState类实现了ViewState和MyAppUiActions，通过read和watch方法来访问和监听状态变化。

4. myAppViewModel:

   final myAppViewModel = StateNotifierProvider<MyAppViewModel, int>((ref) => MyAppViewModel(0));
   

   定义了一个StateNotifierProvider来管理状态。

5. MyAppViewModel类:

   class MyAppViewModel extends StateNotifier<int> with ViewModel<MyAppUiActions> {
     MyAppViewModel(super.state);
   
     increase() {
       state++;
     }
   
     moveToSecond() {
       state = 0;
       uiActions.moveToSecondPage();
     }
   }