Flutter如何在屏幕指定区域内创建可滚动列表

你可以通过 Column + Expanded + ListView 的组合实现这个布局，核心思路是让头部和底部占据固定/自适应空间，中间区域用Expanded填充剩余空间并嵌套可滚动组件。以下是完整示例代码：

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: Column(
          children: [
            // 固定头部区域
            Container(
              padding: const EdgeInsets.all(16),
              color: Colors.grey[100],
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 屏幕标题
                  const Text(
                    "固定标题",
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(height: 12),
                  // Text 1-4 横向排列
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: const [
                      Text("Text 1"),
                      Text("Text 2"),
                      Text("Text 3"),
                      Text("Text 4"),
                    ],
                  ),
                ],
              ),
            ),
            // 中间可滚动列表（占满剩余空间）
            Expanded(
              child: ListView.builder(
                itemCount: 50, // 模拟任意数量数据
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text("列表项 ${index + 1}"),
                    subtitle: Text("这是第 ${index + 1} 条数据"),
                  );
                },
              ),
            ),
            // 固定底部区域
            Container(
              padding: const EdgeInsets.all(16),
              color: Colors.grey[100],
              child: const Center(
                child: Text("footer 文本区域"),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

关键说明： #

• Column 作为整体布局容器，纵向排列头部、列表、底部三个组件
• 头部和底部用Container包裹，可自定义背景色、内边距等样式，它们会根据自身内容高度自适应，保持固定在屏幕顶部/底部
• Expanded 会强制中间的ListView占据头部和底部之外的所有剩余空间，避免列表因内容过多撑满整个屏幕导致头部/底部被挤出视野
• ListView.builder 适合处理大量数据，只会渲染当前可见的列表项，性能更优；如果是少量数据，也可以用SingleChildScrollView包裹Column替代

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