2025从零开始Flutter get X 零基础教程(1)

下面是一个使用 GetX 状态管理库的简单示例，展示了计数器功能的实现。这个例子包含了状态定义、控制器和视图层的基本用法。

这个示例展示了 GetX 的核心功能：

1. 使用 GetMaterialApp 作为应用入口
2. 创建控制器 CounterController 管理状态
3. 使用 obs 使变量可观察
4. 通过 Get.put() 初始化控制器
5. 使用 Obx 自动更新 UI
6. 直接调用控制器方法更新状态

运行这个应用后，点击浮动按钮会触发控制器中的 increment 方法，更新计数状态并自动刷新 UI。

getx-simple-exampleGetX 最简单示例

V1

生成 lib/main.dart

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'GetX Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'GetX Counter'),
    );
  }
}

// 定义控制器
class CounterController extends GetxController {
  // 定义可观察的状态
  var count = 0.obs;

  // 定义增加计数的方法
  void increment() {
    count.value++;
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    // 初始化控制器
    final CounterController controller = Get.put(CounterController());

    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            // 使用 Obx 监听状态变化
            Obx(() => Text(
                  '${controller.count.value}',
                  style: Theme.of(context).textTheme.headline4,
                )),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: controller.increment,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}  

这个示例展示了 GetX 的核心功能：

1. 使用 GetMaterialApp 作为应用入口
2. 创建控制器 CounterController 管理状态
3. 使用 obs 使变量可观察
4. 通过 Get.put() 初始化控制器
5. 使用 Obx 自动更新 UI
6. 直接调用控制器方法更新状态

运行这个应用后，点击浮动按钮会触发控制器中的 increment 方法，更新计数状态并自动刷新 UI。