You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter使用GetX实现ListView报错:检测到GetX使用不当

问题背景

在Flutter项目中为简单ListView组件接入GetX状态管理能力时,页面抛出错误提示:[Get] the improper use of a GetX has been detected。
已确认前置配置正常:

  • main.dart入口已经使用GetMaterialApp完成根节点包裹
  • 尝试将GetX组件替换为GetBuilder实现相同逻辑,仍然抛出相同错误

问题复现代码如下:

Widget getBody() {
    var size = MediaQuery.of(context).size;
    final controller = Get.put(PassionController());

    return SingleChildScrollView(
      child: Padding(
        padding: const EdgeInsets.only(left: 30, right: 30),
        child: Column(
          children: [
            GetX<PassionController>(
                builder: (_) => ListView.builder(
                    itemCount: controller.passionItems.length,
                    itemBuilder: (context, index) {
                      return ListTile(
                        title:
                            Text('Number: ${controller.passionItems[index]}'),
                      );
                    })),
            GestureDetector(
              onTap: () {
                Navigator.push(
                    context, MaterialPageRoute(builder: (_) => MyHomePage()));
              },
              child: Container(
                width: size.width,
                height: 55,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(30), color: Colors.white
                    // gradient:
                    //     LinearGradient(colors: [primary_one, primary_two])

                    ),
                child: Center(
                  child: Text(
                    "Continue",
                    style: TextStyle(
                        color: kPrimarycolor,
                        fontSize: 18,
                        fontWeight: FontWeight.w500),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
错误诱因

报错由两个核心问题共同触发:

  1. 依赖注入位置错误:Get.put(PassionController())写在getBody()构建方法内,每次组件触发重建都会重复执行控制器注入操作,违反GetX依赖注入的生命周期规则。
  2. 滚动组件嵌套布局冲突:ListView.builder被直接嵌套在Column和外层SingleChildScrollView中,没有设置高度约束。ListView默认会尝试占满垂直方向全部可用空间,和Column的无限高度布局规则冲突,同时两层嵌套滚动组件未做滑动冲突处理,GetX检测到布局异常后抛出误用错误。
修复方案
  • 调整控制器注入位置:将Get.put逻辑从getBody()构建方法中移除,放到对应页面State的initState生命周期中执行,保证整个页面生命周期内控制器只注入一次,避免重复注入问题。
  • 给ListView添加布局约束:给嵌套在Column内的ListView.builder添加两个必要属性:
    • shrinkWrap: true:让ListView根据列表内容自适应高度,不再尝试撑满全部垂直可用空间
    • physics: const NeverScrollableScrollPhysics():禁用ListView自身的滚动响应,将滚动行为统一交给外层的SingleChildScrollView处理,解决滑动冲突
  • 可选优化:GetX组件的builder回调会自动返回当前绑定的控制器实例,可以直接使用回调内的实例访问状态数据,减少外部上下文引用带来的意外问题。

修复后的核心代码示例:

// 先在页面State类中声明控制器变量
late final PassionController controller;

@override
void initState() {
  super.initState();
  // 控制器注入放在initState中,仅执行一次
  controller = Get.put(PassionController());
}

Widget getBody() {
  var size = MediaQuery.of(context).size;

  return SingleChildScrollView(
    child: Padding(
      padding: const EdgeInsets.only(left: 30, right: 30),
      child: Column(
        children: [
          GetX<PassionController>(
              builder: (_) => ListView.builder(
                  // 新增两个约束属性解决布局冲突
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  itemCount: controller.passionItems.length,
                  itemBuilder: (context, index) {
                    return ListTile(
                      title:
                          Text('Number: ${controller.passionItems[index]}'),
                    );
                  })),
          GestureDetector(
            onTap: () {
              Navigator.push(
                  context, MaterialPageRoute(builder: (_) => MyHomePage()));
            },
            child: Container(
              width: size.width,
              height: 55,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(30), color: Colors.white
              ),
              child: Center(
                child: Text(
                  "Continue",
                  style: TextStyle(
                      color: kPrimarycolor,
                      fontSize: 18,
                      fontWeight: FontWeight.w500),
                ),
              ),
            )
          )
        ],
      ),
    ),
  );
}

内容的提问来源于stack exchange,提问作者rameez khan

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.27 17:01:19