GetX/Obx使用不当报错：如何通过GestureDetector更新expanded变量？

错误原因 #

• 使用Obx但未在其作用域内监听任何GetX可观察变量，违反GetX使用规范。
• expanded是普通bool变量且定义在build方法内，每次Widget重建都会被重置为false，无法实现状态持久化更新。

修复步骤 #

1. 将普通变量改为GetX可观察变量
   在Widget类的成员变量区域定义RxBool类型变量：

   final RxBool expanded = false.obs;
   

2. 修改变量更新逻辑
   在onPanUpdate回调中，通过.value修改可观察变量的值：

   if(details.delta.dy < 0){
     expanded.value = true;
   }else if(details.delta.dy > 0){
     expanded.value = false;
   }
   

3. 让Obx监听变量变化
   在AnimatedPositioned的bottom属性中使用expanded.value，确保Obx能检测到变量变化并触发对应Widget重建。

修改后的完整代码 #

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.grey.shade200,
    body: Obx(() => PageView.builder(
      pageSnapping: true,
      itemCount: 5,
      itemBuilder: (context, index) {
        return Padding(
            padding: const EdgeInsets.symmetric(horizontal: 26.0),
            child: Stack(
              alignment: Alignment.center,
              children: [
                AnimatedPositioned(
                    duration: const Duration(milliseconds: 500),
                    bottom: expanded.value ? 150 : 100,
                    child: GestureDetector(
                        onPanUpdate: (details) {
                          print(details.delta.dy);
                          if(details.delta.dy < 0){
                            expanded.value = true;
                          }else if(details.delta.dy > 0){
                            expanded.value = false;
                          }
                        },
                        child: Image.network(
                          'https://metroparkstoledo.com/media/7672/home-rentals-700x880.jpg',
                          height: MediaQuery.of(context).size.height * .6
                        )
                    )
                ),
              ],
            )
        );
      },
    )),
  );
}

关键说明 #

• GetX的Obx仅监听作用域内的可观察变量（以.obs结尾的变量），只有这些变量变化时，才会重建对应的Widget。
• 可观察变量不能定义在build方法内，否则每次重建都会初始化，丢失之前的状态。

内容的提问来源于stack exchange，提问作者Tanziba Mouri