flutter GlobalKey 设置后 Getx Obx响应式数据没法触发

发布于 1 个月前 作者 itying888 45 次浏览 来自 分享

flutter GlobalKey 设置后 Getx Obx响应式数据没法触发如何解决

代码如下 : Scaffold里面加了抽屉组件Drawer,当配置 key: controller.scaffoldGlobalKey 后,obx数据没法加载

@override
  Widget build(BuildContext context) {
    return Scaffold(
      endDrawer: const Drawer(
        child: DrawerHeader(child: Text('右侧筛选')),
      ),
      //侧边栏
      key: controller.scaffoldGlobalKey,
      appBar: AppBar(
        title: Container(
          //可以添加动画的Container
          width: ScreenAdapter.width(840),
          height: ScreenAdapter.height(96),
          decoration: BoxDecoration(
              color: const Color.fromARGB(230, 252, 243, 236), //背景
              borderRadius: BorderRadius.circular(30) //圆角
              ),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center, //对其方式
            children: [
              Padding(
                //Padding  能设置 padding  的组件 类似 inlne-div
                padding: EdgeInsets.fromLTRB(
                    ScreenAdapter.width(34), 0, ScreenAdapter.width(10), 0),
                child: const Icon(Icons.search),
              ),
              Text(
                '手机',
                style: TextStyle(
                    color: Colors.black45,
                    fontSize: ScreenAdapter.fontSize(40)),
              )
            ],
          ),
        ),
        centerTitle: true,
        backgroundColor: Colors.amber,
        actions: const [
          Text('') //隐藏覆盖抽屉组件
        ],
        elevation: 0, //阴影
      ),
      body: Stack(children: [_productListWidget(), _subHeadWidget()]),
    );
  }

问题分析

这个问题可能是因为GlobalKey和GetX之间的兼容性问题或者使用上的错误。GlobalKey通常用于在widget树中查找特定的widget实例,而GetX是一个状态管理库,它使用Obx来自动重建widget。

解决方法

全局加上obx


  @override
  Widget build(BuildContext context) {
    return Obx(() => Scaffold(
          endDrawer: const Drawer(
            child: DrawerHeader(child: Text('右侧筛选')),
          ),
          //侧边栏
          key: controller.scaffoldGlobalKey,
          appBar: AppBar(
            title: Container(
              //可以添加动画的Container
              width: ScreenAdapter.width(840),
              height: ScreenAdapter.height(96),
              decoration: BoxDecoration(
                  color: const Color.fromARGB(230, 252, 243, 236), //背景
                  borderRadius: BorderRadius.circular(30) //圆角
                  ),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center, //对其方式
                children: [
                  Padding(
                    //Padding  能设置 padding  的组件 类似 inlne-div
                    padding: EdgeInsets.fromLTRB(
                        ScreenAdapter.width(34), 0, ScreenAdapter.width(10), 0),
                    child: const Icon(Icons.search),
                  ),
                  Text(
                    '手机',
                    style: TextStyle(
                        color: Colors.black45,
                        fontSize: ScreenAdapter.fontSize(40)),
                  )
                ],
              ),
            ),
            centerTitle: true,
            backgroundColor: Colors.amber,
            actions: const [
              Text('') //隐藏覆盖抽屉组件
            ],
            elevation: 0, //阴影
          ),
          body: Stack(children: [_productListWidget(), _subHeadWidget()]),
        ));
  }

回到顶部