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

基于 `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,
    );
  }
}

修改页面中需要更新的地方，如背景颜色、文字颜色等。
1
2
3
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有详细实现。

欢迎关注公众号：flutter_todo，有更多技术干货和学习资源教程分享。

基于 Getx 实现的 MVVM

换主题只需要这4步就能实现

基于 `Getx` 实现的 `MVVM`