简悦音乐播放器用到的相关技术点都在这里了（一）

基于 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 = [];
}

ViewModelHomeController继承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步就能实现

1. 定义好主题显示的数据，如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,
     );
   

2. 在入口的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,
       );
     }
   }
   

3. 修改页面中需要更新的地方，如背景颜色、文字颜色等。

   Container(
         color: Get.theme.primaryColor,
   )
   

4. 手动触发切换

   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有详细实现。