基于 Getx 实现的 MVVM
在原生的iOS、Android中我们已经习惯了使用MVVM取代MVC，来实现业务页面，这样结构更加清晰，也便于管理和功能扩展。在Flutter通过Getx来实现MVVM，如播放器的首页的实现，简化之后的代码如下。
View的实现：在View中实例化一个HomeController并交给 Get, build方法中返回一个由GetBuilder <HomeController>( builder: (controller) {return ......;}包裹的子widget，子widget的显示的数据有HomeController调用update()后来更新。但是需要注意的是，这里的HomeController在退出本页面后不会主动销毁，如需要销毁，在dispose()函数中调用Get.delete<HomeController>();即可。
class HomeView extends StatefulWidget {
const HomeView({Key? key}) : super(key: key);
@override
_HomeViewState createState() => _HomeViewState();
}
class _HomeViewState extends State<HomeView> {
final HomeController controller = Get.put(HomeController());
@override
Widget build(BuildContext context) {
return GetBuilder<HomeController>(
builder: (controller) {
return ......;
},
);
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
Get.delete<HomeController>();
}
}
Model主要用来保存网络请求的数据、记录页面widget的状态等
class HomeState {
HistoryPo? selectedItem;
int selectedIndex = -1;
List<PlayListItemModel> playList = [];
List<HistoryPo> ranks = [];
}
ViewModel HomeController继承GetxController来充当ViewModel的角色，一般会在重写的父类onReady()方法中发送物流异步请求，拿到数据后再调用update()就会更新 GetBuilder <HomeController>( builder: (controller) {return ......;}中的子Widget显示。
class HomeController extends GetxController {
HomeState state = HomeState();
@override
void onReady(){
fetchPlayList();
fetchTopSongs();
}
fetchTopSongs() async {
var dio = Dio();
final response = await dio.get(Api.top500);
String sst =
response.toString().replaceAll(RegExp(r'<!--KG_TAG_RES_START-->'), "");
sst = sst.replaceAll(RegExp(r'<!--KG_TAG_RES_END-->'), "");
Map<String, dynamic> data = jsonDecode(sst);
List dataList = data["data"]["info"];
List<HistoryPo> ranks =
dataList.map((e) => HistoryPo.fromKugouRankJson(e)).toList();
state.ranks = ranks;
update();
}
fetchPlayList() async {
var dio = Dio();
final response =
await dio.get(Api.neteasePlayList, queryParameters: {"offset": 0});
Map<String, dynamic> data = jsonDecode(response.toString());
List dataList = data["rows"];
var playList = dataList.map((e) => PlayListItemModel.fromJson(e)).toList();
state.playList = playList;
update();
}
chooseSong(HistoryPo item, int index) {
state.selectedItem = item;
state.selectedIndex = index;
Get.find<PlayController>().initState(state.ranks, index);
update();
}
morePlayList(int index) {
PlayListItemModel playListItem = state.playList[index];
}
}
HomeController的实现覆盖的Widget范围可以更小，这样在调用update()时需要更新的Widget也少一些，减少大面积的Widget更新，一定程度上提升页面流畅度，特别适合于比较复杂的页面。
换主题只需要这4步就能实现
- 定义好主题显示的数据，如
light和dark。
///白天模式
static ThemeData lightTheme = ThemeData.light().copyWith(
primaryColor: const Color(0xffffffff),
splashColor: Colors.white,
highlightColor: Colors.white,
appBarTheme: const AppBarTheme(
systemOverlayStyle: SystemUiOverlayStyle.dark,
elevation: 0,
backgroundColor: Color(0xffffffff),
iconTheme: IconThemeData(color: Colors.black,size: 20),
titleTextStyle: TextStyle(
fontSize: 15,
color: Color(0xFF2d2d2d),
),
centerTitle: true,
),
scaffoldBackgroundColor: const Color(0xffF6F8F9),
backgroundColor: const Color(0xffF6F8F9),
dividerColor: const Color(0xffF6F8F9),
);
///夜间模式
static ThemeData darkTheme = ThemeData.dark().copyWith(
primaryColor: ThemeData.dark().primaryColor,
splashColor: ThemeData.dark().splashColor,
highlightColor: Colors.black,
appBarTheme: AppBarTheme(
systemOverlayStyle: SystemUiOverlayStyle.light,
elevation: 0,
backgroundColor: ThemeData.dark().cardColor,
iconTheme: const IconThemeData(color: Colors.white, size: 20),
titleTextStyle: const TextStyle(
fontSize: 15,
color: Color(0xFFeeeeee),
),
centerTitle: true,
),
scaffoldBackgroundColor: ThemeData.dark().scaffoldBackgroundColor,
backgroundColor: Colors.black,
iconTheme: const IconThemeData(
color: Colors.blue,
),
dividerColor: ThemeData.dark().dividerColor,
);
- 在入口的Widget，即
runApp(const MyApp());的MyApp的GetMaterialApp配置好上面声明的lightTheme和darkTheme。
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
theme: ThemeConfig.lightTheme,
darkTheme: ThemeConfig.darkTheme,
);
}
}
- 修改页面中需要更新的地方，如背景颜色、文字颜色等。
Container(
color: Get.theme.primaryColor,
)
- 手动触发切换
GestureDetector(
onTap: () {
Get.changeThemeMode(Get.isDarkMode ? ThemeMode.light : ThemeMode.dark);
Future.delayed(Duration(milliseconds: 250), () {
Get.forceAppUpdate();
});
}}
跟随系统变化
class AppLifeCycleDelegate with WidgetsBindingObserver {
static final AppLifeCycleDelegate _appLifeCycleDelegate =
AppLifeCycleDelegate._inital();
AppLifeCycleDelegate._inital() {
WidgetsBinding.instance?.addObserver(this);
}
factory AppLifeCycleDelegate() {
return _appLifeCycleDelegate;
}
@override
void didChangePlatformBrightness() {
super.didChangePlatformBrightness();
Get.forceAppUpdate();
}
}
- 在
main()添加WidgetsFlutterBinding.ensureInitialized();
小结：以上实现是简化后的代码，具体实现在gtihub有详细实现。
