Flutter中Column嵌入滚动容器后白屏及滚动实现方案咨询

原代码放SingleChildScrollView里白屏，本质是组件约束逻辑完全互斥：

• 垂直方向的SingleChildScrollView给子节点传递的是无上限、无固定值的高度约束，子组件高度可以随内容无限延伸
• Flexible/Expanded的设计前提是父组件必须提供明确的固定高度，才能按flex比例分配剩余空间
• 当Flexible被放进SingleChildScrollView下的Column时，计算可用空间会直接得到0值，所有子组件高度被压缩到不可见，最终整页空白。

按照你不依赖ListView、SingleChildScrollView的约束，直接用CustomScrollView做滚动容器即可，完全避开上述坑点，同时实现均匀间距的Column滚动效果：

• 不存在ListView的列表项强制回收、布局约束，支持自由嵌套复杂组件
• 从根源上避免无约束高度下Flex组件计算为0的白屏问题
• 间距效果和mainAxisAlignment: spaceEvenly完全一致，不管内容是不足一屏、还是超出一屏需要滚动，视觉效果都统一。

实现步骤 #

• 移除所有套在Column子节点外层的Flexible包装，业务组件保留你原本设置的固定高度（比如代码里150高度的Container）。原代码里给Flexible设置的flex比例实际不生效，因为所有子组件内部的Container都已经写死了固定高度，去掉Flexible包装完全不改动原有视觉效果，也不需要依赖flex比例做空间分配
• 用SliverFillRemaining给Column提供一个和屏幕可视区等大的固定高度约束，保留mainAxisAlignment: spaceEvenly的设置，实现内容不足一屏时的均匀分布
• 当内容总高度超过屏幕时，SliverFillRemaining会自动放开高度约束，Column按真实内容高度支撑滚动；如果需要保持全局统一间距，只需要在相邻子组件之间插入固定高度的SizedBox做分隔即可。

可直接运行的示例代码 #

return Scaffold(
  appBar: AppBar(
    automaticallyImplyLeading: false,
    backgroundColor: Colors.red,
    title: const Text("Beverages"),
  ),
  body: CustomScrollView(
    slivers: [
      SliverFillRemaining(
        hasScrollBody: false,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            // 原第一个Flexible包装的组件，去掉Flexible直接使用
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: Container(
                height: 150.0,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(3.0),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey[400]!,
                      blurRadius: 3.0,
                      spreadRadius: 1.0,
                      offset: const Offset(2, 2),
                    )
                  ],
                ),
              ),
            ),
            // 原第二个Flexible包装的嵌套Column，去掉Flexible直接使用
            Column(
              children: [
                Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Container(
                    height: 150.0,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(3.0),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.grey[400]!,
                          blurRadius: 3.0,
                          spreadRadius: 1.0,
                          offset: const Offset(2, 2),
                        )
                      ],
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Container(
                    height: 150.0,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(3.0),
                      boxShadow: [
                        BoxShadow(
                          color: Colors.grey[400]!,
                          blurRadius: 3.0,
                          spreadRadius: 1.0,
                          offset: const Offset(2, 2),
                        )
                      ],
                    ),
                  ),
                ),
              ],
            ),
            // 原第三个Flexible包装的组件，去掉Flexible直接使用
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: Container(
                height: 150.0,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(3.0),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey[400]!,
                      blurRadius: 3.0,
                      spreadRadius: 1.0,
                      offset: const Offset(2, 2),
                    )
                  ],
                ),
              ),
            ),
          ],
        ),
      )
    ],
  ),
);

内容的提问来源于stack exchange，提问作者Juzer Taher Totanawala