Flutter MVVM架构插件nd_mvvm的使用
Flutter MVVM架构插件nd_mvvm的使用
nd_mvvm 是一个用于实现 MVVM 模式的轻量级工具库。
示例代码
以下是一个完整的示例代码，展示如何在 Flutter 应用中使用 nd_mvvm 插件。
main.dart
//
// main.dart
// nd_mvvm/sample
//
// Created by Nguyen Duc Hiep on 22/11/2022.
//
import 'package:flutter/material.dart';
// 导入 nd_mvvm 的核心库
import 'package:nd_mvvm/nd_mvvm.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// 这个小部件是应用程序的根。
[@override](/user/override)
Widget build(BuildContext context) {
return const MaterialApp(
title: 'NDMVVM 示例',
home: HomePage(),
);
}
}HomePage.dart
//
// home_page.dart
// nd_mvvm/sample
//
// Created by Nguyen Duc Hiep on 22/11/2022.
//
import 'package:flutter/material.dart';
import 'package:nd_mvvm/nd_mvvm.dart';
// 定义一个简单的 ViewModel
class HomeViewModel extends ViewModel {
String message = "Hello, MVVM!";
void updateMessage(String newMessage) {
message = newMessage;
notifyListeners(); // 通知观察者更新 UI
}
}
class HomePage extends StatefulWidget {
[@override](/user/override)
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
// 创建 ViewModel 实例
final HomeViewModel _viewModel = HomeViewModel();
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("NDMVVM 示例"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// 显示 ViewModel 中的消息
Text(_viewModel.message),
ElevatedButton(
onPressed: () {
// 更新 ViewModel 中的消息
_viewModel.updateMessage("消息已更新");
},
child: Text("更新消息"),
),
],
),
),
);
}
[@override](/user/override)
void dispose() {
// 在页面销毁时释放 ViewModel 资源
_viewModel.dispose();
super.dispose();
}
}更多关于Flutter MVVM架构插件nd_mvvm的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter MVVM架构插件nd_mvvm的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
nd_mvvm 是一个用于 Flutter 的 MVVM 架构插件，它帮助开发者更容易地实现 Model-View-ViewModel (MVVM) 架构。MVVM 是一种设计模式，它将应用程序的逻辑、数据和 UI 分离，使得代码更易于维护和测试。
安装 nd_mvvm
首先，你需要在 pubspec.yaml 文件中添加 nd_mvvm 依赖：
dependencies:
flutter:
sdk: flutter
nd_mvvm: ^1.0.0 # 请使用最新版本然后运行 flutter pub get 来安装依赖。
使用 nd_mvvm
nd_mvvm 提供了几个核心类来帮助你实现 MVVM 架构：
- ViewModel: 负责处理业务逻辑和数据。
- View: 负责 UI 的展示。
- Model: 负责数据的存储和获取。
1. 创建 ViewModel
首先，创建一个 ViewModel 类，继承自 BaseViewModel。BaseViewModel 提供了一些生命周期方法，如 onInit 和 onDispose。
import 'package:nd_mvvm/nd_mvvm.dart';
class MyViewModel extends BaseViewModel {
String _data = "Hello, MVVM!";
String get data => _data;
void updateData(String newData) {
_data = newData;
notifyListeners(); // 通知 View 更新
}
[@override](/user/override)
void onInit() {
super.onInit();
// 初始化逻辑
}
[@override](/user/override)
void onDispose() {
super.onDispose();
// 清理逻辑
}
}2. 创建 View
接下来，创建一个 View，通常是一个 StatefulWidget 或 StatelessWidget。使用 ViewModelProvider 来将 ViewModel 与 View 绑定。
import 'package:flutter/material.dart';
import 'package:nd_mvvm/nd_mvvm.dart';
import 'my_view_model.dart'; // 导入你的 ViewModel
class MyView extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return ViewModelProvider<MyViewModel>(
create: () => MyViewModel(),
builder: (context, viewModel) {
return Scaffold(
appBar: AppBar(
title: Text('MVVM Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(viewModel.data),
ElevatedButton(
onPressed: () {
viewModel.updateData("Data Updated!");
},
child: Text('Update Data'),
),
],
),
),
);
},
);
}
}3. 运行应用
最后，在 main.dart 中运行你的应用：
import 'package:flutter/material.dart';
import 'my_view.dart'; // 导入你的 View
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter MVVM Example',
home: MyView(),
);
}
}