Flutter GetX 中 obx 和 getBuild绑定数据的区别

Flutter+Getx仿小米APP系列教程：https://www.itying.com/goods-1176.html

Flutter GetX 中 obx 和 getBuild绑定数据的区别是什么呢?下面带大家一起看看

写项目的时候obx用的更多一些，getBuild 也会用到，tab切换里面挂载的页面，进行tab切换默认不会触发每个页面的onInit方法，这个时候如果想进入到某个页面更新数据的时候，就可以用到getBuild 。

obx提供了更简洁、便捷和性能优化的方式来观察和更新状态，特别适用于小规模的状态管理和局部UI更新。而GetBuilder则更适合于需要手动控制重绘粒度或更复杂的状态管理场景。

Flutter GetX中obx绑定数据的例子

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

// 创建一个控制器类
class MyController extends GetxController {
  var count = 0.obs; // 使用.obs将count变为可观察的（Observable）
  
  void increment() {
    count.value++; // 修改可观察变量的值
  }
}

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

class MyApp extends StatelessWidget {
  final MyController controller = Get.put(MyController()); // 注入控制器

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GetX obx Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 使用obx观察和更新状态
              Obx(() => Text(
                'Count: ${controller.count.value}', // 获取可观察变量的值
                style: TextStyle(fontSize: 24),
              )),
              SizedBox(height: 16),
              ElevatedButton(
                onPressed: () {
                  controller.increment(); // 调用控制器的方法来更新状态
                },
                child: Text('Increment'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Flutter GetX中getBuilder绑定数据的例子

import 'package:flutter/material.dart';
import 'package:get/get.dart';
// 创建一个控制器类
class MyController extends GetxController {
  var count = 0;

  void increment() {
    count++;
    update(); // 手动触发UI更新
  }
}
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  final MyController controller = Get.put(MyController()); // 注入控制器
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GetX GetBuilder Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 使用GetBuilder观察和更新状态
            GetBuilder<MyController>(
              initState: (state) {
                  //获取购物车数据
              },
              init: controller,
                builder: (controller) => Text(
                  'Count: ${controller.count}', // 获取控制器的属性值
                  style: TextStyle(fontSize: 24),
                ),
              ),
              SizedBox(height: 16),
              ElevatedButton(
                onPressed: () {
                  controller.increment(); // 调用控制器的方法来更新状态
                },
                child: Text('Increment'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}