Flutter问题二:OBX数据嵌套重复更新

本文探讨了在Flutter中遇到的输入框编辑时导致其他输入框清空的错误,并提出了解决方案。通过将自动监听方式改为手动调用监听,如使用GetX的GetBuilder进行手动刷新,确保在`activeStep`改变时只更新对应的部分,避免了输入框同步问题。示例代码展示了如何实现这一优化,包括自动监听和手动监听的代码片段。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

监听重复嵌套时,会导致输入框做编辑删除操作时,其他输入框自动被清空的问题。那么就需要改变监听方式,将其修改为手动调用监听。

1、自动监听方式如下:

Obx(() => activeStep.value == '1'
          ? stepsBase('模块1', tableNum)
          : activeStep.value == '2'
              ? stepsBase('模块2', baseNum)
              : Container())

2、手动监听方式:

class CollectionPageController extends GetxController {
  /* 步骤 */
  var activeStep = '1'.obs;
  var initNum = ''.obs; //水表基数
}

1)、命名监听

GetBuilder<CollectionPageController>(
      id: 'Name1',
      builder: (_) {
        if (_.activeStep.value == '1') {
            return Container(
                    width: 1.sw,
                    padding: EdgeInsets.only(
                    left: 74.w, right: 75.w),
                    chi
### 如何在 Flutter 中使用 GetX 框架 #### 创建并配置项目 为了使Flutter应用程序能够使用GetX框架,首先需要确保已经安装了Flutter SDK,并创建一个新的Flutter项目。接着,在`pubspec.yaml`文件中添加GetX作为依赖项[^2]。 ```yaml dependencies: flutter: sdk: flutter get: ^4.3.8 ``` 完成上述操作之后,运行命令`flutter pub get`来下载所需的包。 #### 初始化 GetX 控制器 控制器是实现MVVM模式的关键部分之一。通过继承`GetxController`类定义自己的业务逻辑处理器,并利用`onInit()`生命周期函数初始化数据或监听事件[^1]。 ```dart import 'package:get/get.dart'; class CounterController extends GetxController { var count = 0.obs; void increment() => count++; } ``` 这段代码展示了怎样声明一个可观察属性以及相应的方法去改变它的值。`.obs`使得该字段成为响应式的,任何对其赋新值得动作都会触发视图更新。 #### 绑定 UI 和 数据模型 为了让界面自动反映底层数据的变化情况,可以在Widget树里嵌套`Obx`组件,它会订阅指定Rx对象的状态变化并重新渲染关联的小部件[^3]。 ```dart import 'package:flutter/material.dart'; import 'controller.dart'; // 假设上面的CounterController保存在这个路径下 void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('GetX Example')), body: Center(child: MyHomePage()), ), ); } } class MyHomePage extends StatelessWidget { final controller = Get.put(CounterController()); @override Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Obx(() => Text("点击次数:${controller.count.value}", style: TextStyle(fontSize: 24))), ElevatedButton(onPressed: () { controller.increment(); }, child: Text('+')) ], ); } } ``` 这里展示了一个简单的计数器例子,每当按下按钮时就会调用`increment()`方法增加计数值;而显示当前数量的文字则被放置在一个`Obx`内部以便实时同步最新状态。 #### 处理异步任务和其他高级特性 除了基本的数据绑定外,GetX还提供了多种机制用于处理复杂的交互流程,比如发起HTTP请求获取远程资源、执行后台作业等场景下的状态管理和UI刷新问题[^4]。对于这类需求,可以考虑采用`GetX`、`GetBuilder`或者`worker`等方式来进行优化设计。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

聂曦r

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值