越简单越困难，嘿蛋炒饭。

先看代码

View

dart 复制代码

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'index.dart';

class LampSelfHomeOfMusicPage extends StatefulWidget {
  const LampSelfHomeOfMusicPage({Key? key}) : super(key: key);

  @override
  State<LampSelfHomeOfMusicPage> createState() => _LampSelfHomeOfMusicPageState();
}

class _LampSelfHomeOfMusicPageState extends State<LampSelfHomeOfMusicPage>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return const _LampSelfHomeOfMusicViewGetX();
  }
}

class _LampSelfHomeOfMusicViewGetX extends GetView<LampSelfHomeOfMusicController> {
  const _LampSelfHomeOfMusicViewGetX({Key? key}) : super(key: key);

  // 主视图
  Widget _buildView() {
    return const Center(
      child: Text("LampSelfHomeOfMusicPage"),
    );
  }


// @override
// Widget build(BuildContext context) {
//   return GetBuilder<LampSelfHomeOfMusicController>(
//     init: LampSelfHomeOfMusicController(),
//     id: "lamp_self_home_of_music",
//     builder: (_) {
//       return Scaffold(
//         appBar: AppBar(title: const Text("lamp_self_home_of_music")),
//         body: SafeArea(
//           child: _buildView(),
//         ),
//       );
//     },
//   );
// }



  @override
  Widget build(BuildContext context) {
    return GetBuilder<LampSelfHomeOfMusicController>(
      init: LampSelfHomeOfMusicController(),
      id: "lamp_self_home_of_music",
      builder: (_) {
        return _buildView();
      },
    );
  }
}

Controller

dart 复制代码

import 'package:get/get.dart';

class LampSelfHomeOfMusicController extends GetxController {
  LampSelfHomeOfMusicController();

  _initData() {
    update(["lamp_self_home_of_music"]);
  }

  void onTap() {}

  @override
  void onInit() {
    super.onInit();
  }

  @override
  void onReady() {
    super.onReady();
    _initData();
  }

  @override
  void onClose() {
    super.onClose();
  }
}

走两步？分析分析？

这两份代码是Flutter中使用GetX库来管理状态和导航的一个例子。GetX是一个轻量级的Flutter库，用于状态管理、依赖管理和路由管理，它的目的是提供一个简单而强大的方法来构建Flutter应用程序。

关于视图 View

第一部分：页面组件（`LampSelfHomeOfMusicPage`）

这个组件是一个StatefulWidget，它表示应用程序中的一个页面。页面使用AutomaticKeepAliveClientMixin混入，这允许页面在Tab切换或页面滚动时保持其状态，不被Flutter框架自动销毁重建。wantKeepAlive返回true表明你希望Flutter保持这个页面的状态。

在build方法中，它返回_LampSelfHomeOfMusicViewGetX组件。这里使用了const关键字，表示该组件是不可变的，Flutter框架可以更高效地重建UI。

第二部分：视图组件（`_LampSelfHomeOfMusicViewGetX`）

这个组件继承自GetView<T>，其中T是你希望这个视图绑定的控制器类型。这里T是LampSelfHomeOfMusicController。GetView提供了一个controller属性，直接访问绑定的控制器，而无需手动调用Get.find<T>()。

_buildView方法负责构建页面的主视图，这里只是简单地显示了一个文本。在实际的应用中，这里会构建复杂的UI。

build方法使用GetBuilder来监听LampSelfHomeOfMusicController的变化。当控制器调用update()方法时，GetBuilder会重建其builder方法中的UI。这是GetX进行状态管理的方式之一。

关于控制器Controller

控制器（LampSelfHomeOfMusicController）

控制器继承自GetxController，这是GetX状态管理的核心。控制器负责业务逻辑和状态更新。

onInit：当控制器初始化时调用。
onReady：当控制器准备好后调用，通常用于在UI构建完成后执行一些初始化操作。
_initData：这是一个自定义方法，用于初始化数据，它在onReady中被调用，并通过update()方法更新UI。

控制器通过update()方法触发绑定的UI更新，这里传递了一个ID，["lamp_self_home_of_music"]，这样只有指定ID的GetBuilder会响应更新，这是进行局部更新的一种方式。

为什么这么写

使用GetX的好处是它简化了状态管理、依赖注入和路由管理。代码结构清晰，将业务逻辑和UI分离，易于维护和扩展。通过使用GetView和GetBuilder，它避免了频繁地使用setState来更新UI，从而提高了应用性能。此外，AutomaticKeepAliveClientMixin的使用确保了用户体验的连贯性，避免了不必要的页面重建。

总的来说，这段代码展示了在Flutter项目中使用GetX进行状态管理和页面构建的一个典型例子。

走两步？Getx一个Stateful页面，View和Controller，为什么要这么设计？