Flutter 和 Getx：可观察对象如何发出变化

Question

我有一个小条，它会在用户移动容器和停止触摸容器时改变颜色。我使用一个 Listener 小部件和函数 onPointerMove，它调用值为 true 的 GetxController 和值为 false 的 onPointerUp，因此容器的颜色会根据控制器中的 RxBool 发生变化。
我的问题是：在调用 onPointerMove 时，RxBool 更改为真值，但我不知道该值是否始终发出，即使它是相同的，因为那样我的小部件每次都会重绘；或者如果值不发出任何东西，因为它是相同的。

这是控制器

  RxBool isPressing = false.obs;

  void changeColor(bool i) => i ? isPressing.value = true : isPressing.value = false;

这是侦听器小部件

 Listener(
      onPointerMove: (PointerEvent e) => _touchController.changeColor(true),
      onPointerUp: (PointerUpEvent e) => _touchController.changeColor(false),
      .
      .
      .
          children: [
            Obx(() => Container(
              height: 100,
              width: 4,
              decoration: BoxDecoration(
                color: _touchController.isPressing.value ? primaryColor : Colors.white,
                borderRadius: BorderRadius.circular(10),
              ),
            )),

Answer 1

如果你在 StatelessWidget 中打开 Container 并在 build 方法中打印一些东西，你可能会注意到当值相同时它不会发出。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  MainController _touchController = Get.put(MainController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Listener(
        onPointerMove: (PointerEvent e) =>
            _touchController.changeColor(true),
        onPointerUp: (PointerUpEvent e) =>
            _touchController.changeColor(false),
        child: Obx(() => Box(
          isPressing: _touchController.isPressing.value,
        )),
      ),
    );
  }
}

class Box extends StatelessWidget {
  final bool isPressing;

  const Box({Key? key, required this.isPressing}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    print('re build');
    return Container(
      height: 100,
      width: 100,
      decoration: BoxDecoration(
        color: isPressing ? Colors.white : Colors.red,
        borderRadius: BorderRadius.circular(10),
      ),
    );
  }
}

class MainController extends GetxController {
  RxBool isPressing = false.obs;

  void changeColor(bool i) =>
      i ? isPressing.value = true : isPressing.value = false;
}

Flutter 和 Getx：可观察对象如何发出变化

Flutter and Getx: How an observable emit changes

flutter

dart

rxdart

flutter-getx