以下是一个演示如何使用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等,每一种都有不同的用例场景和特性,使得开发者可以根据实际情况来选择最适合自己的响应式框架。