Flutter Getx Obx 响应式的使用代码演示

24 min read

以下是一个演示如何使用Getx Obx实现响应式的代码示例:

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

class CounterController extends GetxController {
  var count = 0.obs;
  increment() => count.value++;
}

class HomePage extends StatelessWidget {
  final CounterController c = Get.put(CounterController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Getx Obx Demo"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              "You have pressed the button this many times:",
            ),
            Obx(() => Text(
              '${c.count}',
              style: TextStyle(
                fontSize: 48,
                fontWeight: FontWeight.bold,
              ),
            )),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => c.increment(),
        child: Icon(Icons.add),
      ),
    );
  }
}

在这个示例中,我们使用GetX框架来创建一个响应式的计数器。 CounterController 是一种 GetxController,它包含了一个整数类型的 count 变量,这个变量使用 obs 特性进行了声明,使其可以使用 Obx 进行监听。 increment() 方法被用来增加计数器的值。

HomePage 是一个 Stateless Widget,包含了一个 Obx 组件,它将 CounterController 中的 count 变量的值绑定在 Text 组件上,每次计数器的值有变化时,Obx 组件就会自动重新渲染视图,从而将新的值显示出来。

在 FloatingActionButton 中,我们使用 CounterController 的实例来调用 increment() 方法,以增加计数器的值。由于 count 变量已经被声明为 observable,系统会自动更新 Obx 组件的值,从而将新的计数器值更新到应用程序的UI中。

除了Obx之外还有其他的GetXAPI,例如GetX, GetBuilder和GetNotifier等,每一种都有不同的用例场景和特性,使得开发者可以根据实际情况来选择最适合自己的响应式框架。