Flutter使用GetX在body中实现多列表及解决嵌套渲染问题

该现象本质是Flutter布局约束冲突，和GetX框架无关。Column会给子组件传递无限大的垂直可用高度，而ListView默认会尝试填充父组件给出的全部可用高度，无限高度下ListView无法计算自身尺寸，因此不会执行itemBuilder逻辑。

根据你的业务场景选择对应方案即可，GetX本身不需要做特殊调整：

• 方案1：单列表占Column剩余可用空间（最常用场景）
  用Expanded组件包裹GetX组件，强制ListView只占用Column分配完其他固定高度子组件后的剩余空间，实现代码如下：

  body: Column(
    children: [
      // 可在此处放置顶部标题、筛选栏等固定高度组件
      Expanded(
        child: GetX<LokationListeCtrl>(
          builder: (ctrl) => ListView.separated(
            separatorBuilder: _separatorBuilder,
            itemCount: ctrl.lokationListe.length,
            itemBuilder: (BuildContext context, int index) {
              return _lokationTile(ctrl.lokationListe.elementAt(index));
            },
          ),
        ),
      ),
      // 第二个列表也可通过Expanded按比例分配高度
    ],
  ),
  

• 方案2：多个列表共同跟随页面滚动
  如果需要整个页面可滚动、多个列表都作为页面内容的一部分，在最外层套SingleChildScrollView，同时给每个ListView设置shrinkWrap: true并禁用自身滚动，实现代码如下：

  body: SingleChildScrollView(
    child: Column(
      children: [
        GetX<LokationListeCtrl>(
          builder: (ctrl) => ListView.separated(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            separatorBuilder: _separatorBuilder,
            itemCount: ctrl.lokationListe.length,
            itemBuilder: (BuildContext context, int index) {
              return _lokationTile(ctrl.lokationListe.elementAt(index));
            },
          ),
        ),
        // 第二个列表同理配置
        GetX<YourSecondListCtrl>(
          builder: (ctrl) => ListView.separated(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            separatorBuilder: _separatorBuilder,
            itemCount: ctrl.secondList.length,
            itemBuilder: (BuildContext context, int index) {
              return _secondListItem(ctrl.secondList.elementAt(index));
            },
          ),
        ),
      ],
    ),
  ),
  

• 方案3：固定高度列表
  如果列表高度可预知，直接用SizedBox指定高度包裹ListView即可，适合固定高度列表场景。

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