
在應用程式開發中經常聽到的”MVVM”,
其基本概念在這裡簡單整理了。
也介紹了在Flutter中實現的程式碼範例。
MVVM的概要
MVVM(Model-View-ViewModel)是,
將應用程式的邏輯和UI(使用者介面)分開,
以提高開發效率和維護性的軟體設計方法。
它是一種根據”畫面顯示”、”資料操作”、”資料定義”等角色設計的手法。
類似的概念還有MVC等方法。
MVVM的構成要素
MVVM的構成包含Model、View和ViewModel三個部分。
View
用戶可見的UI部分
顯示的資料從ViewModel獲取
在Flutter中,由Widget表現
ViewModel
負責應用程式的複雜邏輯部分
處理(計算或判斷等)提供給View的資料
資料從Model獲取
Model
負責資料的定義及資料的CRUD操作
Repository(補充)
用於獲取初始資料和保存持久資料。
進行DB的CRUD操作和資料處理,並將資料傳遞給ViewModel。
MVVM各要素之間的關係
構成要素之間的關係如下所示。

在Flutter中,使用Riverpod等檢測狀態變化的實現。
通過使用Riverpod,可以檢測ViewModel或Model狀態變化,
並使畫面重新繪製。
MVVM的優點
MVVM的最大優點在於,顯示(View)、操作(ViewModel)、資料(Model)
分離,使得每個部分變得簡單,易於管理。
但是,缺點是如果Model有變更,可能會影響到ViewModel和View,
反而可能增加變更範圍。
MVVM及Repository的程式碼範例和說明
以下是使用Riverpod實現的Flutter中的MVVM範例。
// User模型
class User {
final String name;
final String email;
User(this.name, this.email);
}
// Repository
// 實際上是從DB或API獲取資料,但這裡返回的是固定值的資料
class UserRepository {
Future<User> fetchUser() async {
return User('Goda Takeshi', 'Jaian@com');
}
}
// UserViewModel
final userProvider = FutureProvider<User>((ref) async {
final repository = UserRepository();
return repository.fetchUser();
});
// UserView
class UserView extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final user = ref.watch(userProvider);
return Scaffold(
appBar: AppBar(title: Text('MVVM Example')),
body: user.when(
data: (user) => Text('User Name: ${user.name}'),
loading: () => CircularProgressIndicator(),
error: (e, stack) => Text('Error: $e'),
),
);
}
}
UserView透過「final user = ref.watch(userProvider)」監視userProvider。
userProvider中,User類定義了型別,並呼叫UserRepository。
UserRepository返回固定值,但實際應用中將從DB或API獲取或更新資料。
最後
介紹了MVVM的設計。
在Flutter的設計中,MVVM並不是絕對好的方法,應根據應用或項目
選擇合適的設計方法。
希望通過本文,能對MVVM有更深入的理解,
並使採用此設計方法的應用程式變得更易讀。