当前位置：首页 > web >正文

打通 Flutter 与原生状态管理：Android ViewModel 的运用

web 2025/9/4 9:37:48

在 FlutterActivity 中使用 ViewModel 是一个结合了 Flutter 和 Android 原生开发（Android Jetpack）的常见场景。这通常用于需要在 Flutter 和原生 Android 代码之间共享状态或逻辑的情况。

核心思路是：

在 Android 原生端（即在 FlutterActivity 或其附属的 Fragment/Activity 中）创建和管理一个 Android ViewModel。
通过 MethodChannel 在 Flutter 和原生端之间建立通信桥梁。
Flutter 端通过 MethodChannel 发送指令或请求数据。
原生端的 ViewModel 处理业务逻辑，并可以通过多种方式（如 LiveData、Flow、回调等）将数据返回给 Flutter。

下面我们通过一个详细的示例来实现这个过程。我们将创建一个简单的计数器，其数据源是 Android 端的 ViewModel。

步骤 1：在 Android 原生端设置

首先，确保你的 android/app/build.gradle 文件中添加了 AndroidX 和 Lifecycle 依赖（对于新项目，这些通常已默认包含）。

dependencies {def lifecycle_version = "2.6.2" // 使用最新稳定版implementation "androidx.lifecycle:lifecycle-viewmodel-ktx:$lifecycle_version"implementation "androidx.lifecycle:lifecycle-livedata-ktx:$lifecycle_version"// ... 其他依赖
}

创建 Android ViewModel

在 android/app/src/main/kotlin/…/ 你的包名下，创建一个 ViewModel 类。

CounterViewModel.kt

package com.yourcompany.yourapp // 替换为你的包名import androidx.lifecycle.LiveData
import androidx.lifecycle.MutableLiveData
import androidx.lifecycle.ViewModelclass CounterViewModel : ViewModel() {// 使用 LiveData 来持有计数器的状态，以便 Flutter 端观察private val _counter = MutableLiveData<Int>(0)val counter: LiveData<Int> = _counterfun increment() {_counter.value = (_counter.value ?: 0) + 1}fun decrement() {_counter.value = (_counter.value ?: 0) - 1}fun getCurrentCount(): Int {return _counter.value ?: 0}
}

在 FlutterActivity 中集成 ViewModel 和 MethodChannel

接下来，你需要创建一个自定义的 FlutterActivity 来托管 ViewModel 并处理来自 Flutter 的调用。

MainActivity.kt

package com.yourcompany.yourapp // 替换为你的包名import androidx.lifecycle.ViewModelProvider
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannelclass MainActivity : FlutterActivity() {// 定义 MethodChannel 的名称，确保与 Flutter 端一致private val CHANNEL = "samples.flutter.dev/native_counter"// 延迟初始化 ViewModelprivate lateinit var counterViewModel: CounterViewModeloverride fun configureFlutterEngine(flutterEngine: FlutterEngine) {super.configureFlutterEngine(flutterEngine)// 初始化 ViewModelcounterViewModel = ViewModelProvider(this).get(CounterViewModel::class.java)// 设置 MethodChannelMethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler { call, result ->// 处理来自 Flutter 的方法调用when (call.method) {"increment" -> {counterViewModel.increment()result.success(null) // 通知 Flutter 调用成功}"decrement" -> {counterViewModel.decrement()result.success(null)}"getCurrentCount" -> {val currentCount = counterViewModel.getCurrentCount()result.success(currentCount) // 将当前计数返回给 Flutter}else -> {result.notImplemented()}}}// (可选) 如果你想主动从原生端推送数据到 Flutter（例如使用 EventChannel 监听 LiveData）// 这部分更复杂，通常用 MethodChannel 的 “调用-返回” 模式就够了。}
}

重要：确保你的 AndroidManifest.xml 使用的是这个自定义的 MainActivity。 android/app/src/main/AndroidManifest.xml

<activityandroid:name=".MainActivity" <!-- 确保是这个 -->android:exported="true"android:launchMode="singleTop"... >...
</activity>

步骤 2：在 Flutter 端设置

现在，在 Flutter 代码中，你需要创建一个对应的 MethodChannel 来与原生端通信。

创建 MethodChannel 工具类

native_counter_service.dart

import 'package:flutter/services.dart';class NativeCounterService {// 与原生端一致的 Channel 名称static const _channel = MethodChannel('samples.flutter.dev/native_counter');// 调用原生端的 increment 方法static Future<void> increment() async {try {await _channel.invokeMethod('increment');} on PlatformException catch (e) {print("Failed to increment: '${e.message}'.");}}// 调用原生端的 decrement 方法static Future<void> decrement() async {try {await _channel.invokeMethod('decrement');} on PlatformException catch (e) {print("Failed to decrement: '${e.message}'.");}}// 调用原生端的 getCurrentCount 方法并获取返回值static Future<int> getCurrentCount() async {try {final int count = await _channel.invokeMethod('getCurrentCount');return count;} on PlatformException catch (e) {print("Failed to get count: '${e.message}'.");return 0; // 出错时返回默认值}}
}

在 Flutter UI 中使用

main.dart

import 'package:flutter/material.dart';
import 'native_counter_service.dart';void main() {runApp(const MyApp());
}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(home: const MyHomePage(),);}
}class MyHomePage extends StatefulWidget {const MyHomePage({super.key});@overrideState<MyHomePage> createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {int _counter = 0;// 从原生端获取初始值@overridevoid initState() {super.initState();_getCountFromNative();}_getCountFromNative() async {final count = await NativeCounterService.getCurrentCount();setState(() {_counter = count;});}// 增加计数_incrementCounter() async {await NativeCounterService.increment(); // 调用原生方法_getCountFromNative(); // 调用后重新获取最新值}// 减少计数_decrementCounter() async {await NativeCounterService.decrement(); // 调用原生方法_getCountFromNative(); // 调用后重新获取最新值}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('Native ViewModel Example'),),body: Center(child: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[const Text('You have pushed the button this many times:',),Text('$_counter',style: Theme.of(context).textTheme.headlineMedium,),],),),floatingActionButton: Column(mainAxisAlignment: MainAxisAlignment.end,children: [FloatingActionButton(onPressed: _incrementCounter,tooltip: 'Increment',child: const Icon(Icons.add),),const SizedBox(height: 16),FloatingActionButton(onPressed: _decrementCounter,tooltip: 'Decrement',child: const Icon(Icons.remove),),],),);}
}