【问题标题】:Flutter and Getx: How an observable emit changesFlutter 和 Getx:可观察到的发射如何变化
【发布时间】:2021-09-19 08:43:42
【问题描述】:

当用户移动容器和用户停止触摸容器时,我有一个改变颜色的小条。我正在使用侦听器小部件和 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),
              ),
            )),

【问题讨论】:

    标签: flutter dart rxdart flutter-getx


    【解决方案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;
    }
    

    【讨论】:

    • 谢谢!你说得对。我想知道如何打印一些东西,但我的大脑崩溃了。再次感谢您
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2023-02-15
    • 2019-09-09
    • 2021-03-15
    • 1970-01-01
    • 2021-12-26
    • 1970-01-01
    • 2019-09-29
    相关资源
    最近更新 更多