flutter - Flutter：如何在 GetX 上监听变量变化

Question

我想根据pressedBool 是假还是真来更改小部件的主体。

这是我写的 GetxController。

    import 'package:get/state_manager.dart';
    
    class PressedState extends GetxController{
      var pressedBool = true;
      changeStatus() {
        if(pressedBool){
          pressedBool = false;            
        }
        else {
          pressedBool = true;
        }
        update();
      }

}

这里是 GetX 更新和监听应该改变页面正文的地方：

final PressedState pressController = Get.put(PressedState());

return MaterialButton(
    onPressed: () {
      pressController.changeStatus();
    },
    child: 
      pressController.pressedBool
            ? Container(...) : Container(...)), ...

我怎样才能让 GetX 来监听 pressBool 变量？

Answer 1

有时，只听更改并更改其他一些控制器或变量的值很有用。例如，如果我们想从另一个屏幕更改选项卡。

我们可以使用 Rx 变量创建控制器

class TabStateController extends GetxController {
  RxInt tabIndex = 0.obs;
}

之后，在带有标签的屏幕上收听更改

      _tabStateController.tabIndex.listen((value) {
        _tabController.index = value; 
      });

因此，我们可以监听可观察变量的变化。

Answer 2

return MaterialButton(
    onPressed: () {
      pressController.changeStatus();
    },
    child:
      GetBuilder<PressedState>(
        init: PressedState() 
        builder: (pressController) {
          return pressController.pressedBool
            ? Container(...) : Container(...))
        }
      ),
 

Answer 3

你的控制器.dart

import 'package:get/state_manager.dart';

class PressedState extends GetxController{
  var pressedBool = true.obs;
  changeStatus() {
    if(pressedBool.isTrue){
      pressedBool.toggle();
    }
    else {
      pressedBool.value = true; //or pressedBool.toggle();
    }
   
  }

}

你的视图.dart

final Controller pressController = Get.put(PressedState());

return MaterialButton(
    onPressed: () {
      pressController.changeStatus();
    },
    child: Obx(() {
     return pressController.pressedBool
            ? Container(...) : Container(...),
        })
     
    

Answer 4

有 3 种方法可以监听控制器中属性的更改。您在控制器的 setter 方法中使用 update() 方法，因此第一个方法对您有用，也是最轻的方法。

如果您没有在小部件中初始化控制器，则：

final Controller _controller = Get.put(Controller());

如果您已经初始化了控制器并且它在内存中，那么：

final Controller _controller = Get.find<Controller>();

GetBuilder<Controller> (
init: _controller,
builder: (_) {
 return Text('${_controller.property}');
}
)

Answer 5

这是你的控制器

import 'package:get/get.dart';

class YourController extende GetxController{

  var yourBoolVar = false.obs;
  
  toggleBoolValue(){

  if(yourBoolVar.isTrue){
    yourBoolVar.toggle();
  }
    yourBoolVar.value = true;
  }

}

然后听你屏幕上的变化

GetX<YourController>(builder: (controller){
  if(controller.yourBoolVar.value){
   // return your true statement view from here
  }else{
   // return your false statement view from here
  }

)

使用它在您的视图类中切换它的值

你的视图.dart

final YourController controller = Get.put(YourController());
return MaterialButton(
        onPressed:() {
        controller.toggleBoolValue();
   }
);