Flutter Getx 如何将 obs 绑定到 Widget？

Question

当我Getx用来更新我的 Widget 时？我不知道Rx()如何联系我放入的东西。

代码是_obx=Rx(). 但我发送的数据是"".obs. 那不是，Rx()但这是RxString()。当我使用"".obs.value="newString". 为什么Rx()可以知道谁更新数据。

就像 ：

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

class GetIncrementPage extends StatefulWidget {
  GetIncrementPage({Key key}) : super(key: key);

  @override
  _GetIncrementPageState createState() => _GetIncrementPageState();
}

class _GetIncrementPageState extends State<GetIncrementPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('get'),
      ),
      body: Container(
        alignment: Alignment.center,
        child: _body(),
      ),
    );
  }

  Widget _body() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        OutlineButton(
          child: Text('get ????'),
          onPressed: c.increment,
        ),
        OutlineButton(
          child: Text('get log ??'),
          onPressed: c.change,
        ),

        Obx(() {
          printInfo(info: '????? get_example');
          return Text(c.count.toString());
        }),

        ObxValue((v) {
          printInfo(info: '????? get_ObxValue_log1 ');
          return Text('logValue:' + v.toString());
        }, ObjectKey('key').obs),

        Obx(() {
          printInfo(info: '????? get_obx_log1');

          return Text('logObx:' + c.log.toString());
        }),
        Obx(() {
          printInfo(info: '????? get_obx_log2');

          return Text(c.log2.toString());
        }),

        // ObxValue((var value) => Text('${value.toString()}'), c),
      ],
    );
  }

  @override
  void dispose() {
    Get.delete<Controller2>();
    super.dispose();
  }

  final Controller2 c = Get.put(Controller2());
}

///
/// Created by fgyong on 2020/10/22.
///

class Controller2 extends GetxController {
  var count = 0.obs;
  var count2 = 0.obs;

  final log = ''.obs;
  final log2 = ''.obs;

  increment() => count++;
  @override
  void onClose() {
    printInfo(info: 'Controller close');
    super.onClose();
  }

  void change() {
    log.value += ' ${log.value.length}';
  }
}

当我将 log.value 更改为新字符串时，为什么 log2 不新鲜。

class Obx extends StatefulWidget {
  final WidgetCallback builder;

  const Obx(this.builder);

  _ObxState createState() => _ObxState();
}

class _ObxState extends State<Obx> {
  RxInterface _observer;
  StreamSubscription subs;

  _ObxState() {
    _observer = Rx();
  }

  @override
  void initState() {
    subs = _observer.subject.stream.listen((data) => setState(() {}));
    super.initState();
  }

  @override
  void dispose() {
    subs.cancel();
    _observer.close();
    super.dispose();
  }

  Widget get notifyChilds {
    final observer = getObs;
    getObs = _observer;
    final result = widget.builder();
    if (!_observer.canUpdate) {
      throw """
      [Get] the improper use of a GetX has been detected. 
      You should only use GetX or Obx for the specific widget that will be updated.
      If you are seeing this error, you probably did not insert any observable variables into GetX/Obx 
      or insert them outside the scope that GetX considers suitable for an update 
      (example: GetX => HeavyWidget => variableObservable).
      If you need to update a parent widget and a child widget, wrap each one in an Obx/GetX.
      """;
    }
    getObs = observer;
    return result;
  }

  @override
  Widget build(BuildContext context) => notifyChilds;
}

为什么rx()可以与日志建立联系，请帮帮我。当我更新时 Rx() 如何知道日志记录？

帮我吧。

Answer 1

您可以使用Get 中的Obx或GetX小部件来“监听”您在 GetxController 中声明的可观察变量的更改。

我认为您也将 Rx 混淆为 ObserVER 与 ObservABLE。Rx 是一个 observable，即你使用 Obx 或 GetX 小部件观察它的变化，（我猜你可以称这两个小部件为“观察者”。）

基本示例

class Log2Page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Controller c = Get.put(Controller());
    // ? declare controller inside build method

    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Obx(
                      () => Text('${c.log2.value}')
              ),
              RaisedButton(
                child: Text('Add +1'),
                onPressed: c.change,
              )
            ],
          ),
        ),
      ),
    );
  }
}

class Controller extends GetxController {
  RxInt log2 = 0.obs;

  void change() => log2.value++;
}

1. 使用 GetX 时，您可能不需要 StatefulWidget。GetxController 存在于小部件的生命周期之外。状态存储在 GetX 控制器（而不是 StatefulWidget）中。
2. GetX 通过您声明为obs、 像count.obs和 的变量来处理流和订阅log2.obs。当您想“聆听”或“观察”时，请使用Obx或GetX小部件。这些会自动侦听obs其子项的更改并在其更改时重建。

Obx 与 GetBuilder 与 GetX

class Log2Page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Controller c = Get.put(Controller());

    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Obx(
                      () => Text('Obx: ${c.log2.value}')
              ),
              // ? requires manual controller.update() call
              GetBuilder<Controller>(
                builder: (_c) => Text('GetBuilder: ${_c.log2.value}'),
              ),
              // ? controller instantiated by Get widget
              GetX<Controller>(
                init: Controller(),
                builder: (_c) => Text('GetX: ${_c.log2.value}'),
              ),
              RaisedButton(
                child: Text('Add +1'),
                onPressed: c.change,
              ),
              RaisedButton(
                child: Text('Update GetBuilder'),
                onPressed: c.update, // rebuild GetBuilder widget
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class Controller extends GetxController {
  RxInt log2 = 0.obs;

  void change() => log2.value++;
}

对象

监听可观察到的 ( obs) 变化。控制器需要已经在其他地方声明/初始化才能使用。

获取X

监听可观察到的 ( obs) 变化。init:如果没有在其他地方完成，可以使用构造函数参数初始化控制器本身。可选参数。init:如果 Controller 已经实例化，则可以安全使用。将连接到现有实例。

获取生成器

难道不听obs变化。必须由您手动重建，调用controller.update(). 类似于setState()通话。init:如果没有在其他地方完成，可以使用参数初始化控制器本身。可选的。

Answer 2

第一的：

when I "".obx.value="newString".why Rx() can know.

这是错误的，.obx 不存在，我猜你的意思是 .obs；

当您创建像这样的 OBS 变量时final a = ''.obs，该变量的类型将是 RxString()，因此您可以使用任何您想要的方式观察该变量。

我知道您可以使用两个小部件来观察屏幕中的情况：

GetX(), Obx()