Flutter 项目实战 架构模式四

在Flutter中实现MVVM架构模式，你可以使用provider包来管理状态，并结合flutter_riverpod来实现更复杂的状态管理。以下是一个简化的例子：

1. 安装依赖：

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0
  flutter_riverpod: ^2.0.0

2. 创建一个ViewModel类：

import 'package:flutter_riverpod/flutter_riverpod.dart';
 
final counterViewModelProvider = StateNotifierProvider<CounterViewModel, int>((ref) {
  return CounterViewModel();
});
 
class CounterViewModel extends StateNotifier<int> {
  CounterViewModel() : super(0);
 
  void increment() {
    state++;
  }
}

3. 在UI层使用ConsumerWidget来消费状态：

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
 
class HomePage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterViewModelProvider);
    return Scaffold(
      body: Center(
        child: Text('$count'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => ref.read(counterViewModelProvider.notifier).increment(),
        child: Icon(Icons.add),
      ),
    );
  }
}

在这个例子中，我们定义了一个counterViewModelProvider来管理计数器的状态，并在HomePage中通过ConsumerWidget来展示和更新计数器的值。这个模式可以扩展到更复杂的应用程序中，通过定义更多的Provider和ConsumerWidget来管理和展示应用程序的不同部分。