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

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