2025 从零开始Flutter getX基础教程(2)

卢小林老师

已于 2025-04-26 09:26:29 修改

阅读量214

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript 开发语言 ecmascript

于 2025-04-26 08:46:11 首次发布

本文链接：https://blog.youkuaiyun.com/codau/article/details/147526139

以下是在不包含完整应用（即不包含 runApp 等应用初始化相关代码）的情况下，编写一个简单的 GetX 组件页面的步骤和示例：

引入依赖：
确保在 pubspec.yaml 文件中添加了 get 依赖，如下：

yaml

dependencies:
  get: ^4.6.5  # 可以根据实际情况选择合适的版本

然后运行 flutter pub get 来获取依赖。

编写代码：
以下是一个简单的计数器页面示例，展示了 GetX 的基本用法：

dart

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

// 定义控制器，管理状态和逻辑
class CounterController extends GetxController {
  // 定义一个可观察的计数器变量，初始值为 0
  var count = 0.obs; 

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

// 定义计数器页面组件
class CounterPage extends StatelessWidget {
  const CounterPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 使用 Get.put() 初始化控制器，GetX 会自动管理其生命周期
    final CounterController controller = Get.put(CounterController());

    return Scaffold(
      appBar: AppBar(
        title: const Text('GetX 计数器页面'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '你已经点击按钮的次数:',
            ),
            // 使用 Obx 包装需要根据状态变化更新的 UI 部分
            Obx(() => Text(
                  '${controller.count.value}',
                  style: Theme.of(context).textTheme.headline4,
                )),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: controller.increment,
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
    );
  }
}

在上述代码中：

CounterController 是一个继承自 GetxController 的控制器类，用于管理计数器的状态（count）和相关逻辑（increment 方法）。
CounterPage 是页面组件，通过 Get.put() 初始化控制器，并在需要响应状态变化的地方使用 Obx 包装 UI 元素。当控制器中的 count 值发生变化时，Obx 包裹的部分会自动更新。

使用页面：
在其他地方（比如在一个已有的 Flutter 应用中），你可以将这个 CounterPage 作为一个路由或者直接使用，例如：

dart

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterPage(),  // 将 CounterPage 设置为首页
    );
  }
}

这样就完成了一个简单的不包含完整应用的 GetX 组件页面的编写，它可以很方便地集成到现有的 Flutter 项目中。