Flutter实现ListView在Container上方滚动的方法

要实现ListView内容在Container上方滚动覆盖的效果，核心思路是用Stack组件堆叠层级，让ListView处于上层，Container处于下层。以下是具体实现代码：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            // 下层的Container，会被ListView的内容覆盖
            Positioned(
              bottom: 0,
              left: 0,
              right: 0,
              height: 120,
              child: Container(
                color: Colors.blue[100],
                child: const Center(
                  child: Text('底部容器'),
                ),
              ),
            ),
            // 上层的ListView，滚动时内容会覆盖Container
            ListView.builder(
              // 底部留足够内边距，避免最后几项被Container完全遮挡
              padding: const EdgeInsets.only(bottom: 140),
              itemCount: 30,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text('列表项 $index'),
                  tileColor: index % 2 == 0 ? Colors.white : Colors.grey[100],
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

关键说明： #

• Stack：用来创建堆叠布局，上层组件会覆盖下层组件
• Positioned：精准控制Container的位置（示例中固定在底部，可根据需求调整top/left/right/bottom参数）
• ListView的padding：设置底部内边距，确保列表最后几项不会被Container完全遮挡

如果需要将Container放在页面中间，只需修改Positioned的参数：

Positioned(
  top: MediaQuery.of(context).size.height / 2 - 60,
  left: 20,
  right: 20,
  height: 120,
  child: Container(
    decoration: BoxDecoration(
      color: Colors.blue[100],
      borderRadius: BorderRadius.circular(12),
    ),
    child: const Center(child: Text('中间容器')),
  ),
)

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