Flutter ListView内嵌Row组件触发渲染异常，无法展示列表及底部输入按钮组

直接触发白屏的错误点 #

• 在ListView的children列表中直接嵌套了Positioned组件。Positioned仅可作为Stack、IndexedStack这类支持绝对定位组件的子节点使用，无法作为可滚动列表的普通子元素参与Sliver布局计算。这也是堆栈日志里最后一个列表项size缺失、SliverGeometry计算为null、视口组件无内容可绘制的直接原因——Sliver几何参数为空时，整个ListView的渲染管线会直接中断，导致连原本正常显示的列表项也无法渲染。
• 未给横向排列的TextField添加宽度约束。Row组件的主轴方向默认会按照子元素的内容宽度分配空间，无固定宽度约束的TextField在横向布局中会触发无限宽度测量异常，即便移除Positioned，不加约束的TextField依然会导致布局计算失败。

修复后实现代码 #

return Container(
  color: appColors.primaryColor,
  child: ListView(
    primary: false,
    padding: EdgeInsets.all(20.0),
    children: [
      // 原有正常列表项保持不变
      Align(
        alignment: Alignment.center,
        child: Text(
          localization.showQR,
          style: Theme.of(context).primaryTextTheme.headline5.copyWith(
            color: appColors.green,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      const SizedBox(height: 20),
      Align(alignment: Alignment.center, child: qrCodeHolder),
      const SizedBox(height: 20),
      Align(
        alignment: Alignment.center,
        child: AutoSizeText(
          localization.home_subLabel,
          textAlign: TextAlign.center,
          maxLines: 1,
          style: Theme.of(context).primaryTextTheme.headline5.copyWith(
            color: appColors.green,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      // 替换原错误的Positioned包裹层
      Row(
        children: [
          // 用Expanded约束TextField宽度，避免无限宽度测量异常
          Expanded(
            child: TextField(
              inputFormatters: [LengthLimitingTextInputFormatter(7)],
              decoration: const InputDecoration(
                filled: true,
                fillColor: Colors.white,
                focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
                enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.white),
                ),
              ),
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 18.0, color: Colors.black),
            ),
          ),
          IconButton(
            icon: Image.asset("assets/images/send.png"),
            onPressed: () => showDialog(
              context: context,
              builder: (_) => const PaymentDialog(),
            ),
          ),
          const Text("dfjbsdifbsdf"),
        ],
      ),
    ],
  ),
);

拓展实现提示 #

如果业务需求是把输入框+按钮固定在页面底部、不随列表内容滚动，不需要把Row放置在ListView的子节点中，可以改用Column结构实现：

• 把原有的可滚动ListView用Expanded包裹，占满Column的剩余空间
• 把Row形式的输入区作为Column的第二个子节点，固定在底部即可，无需依赖Positioned做定位

排查提示：Flutter中遇到Sliver渲染异常白屏时，优先检查最后一个参与计算的子节点的size状态，通常都是子节点违反了组件对应的布局约束导致的。

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