Flutter中如何解决组件重叠与底部溢出问题？

要实现红色容器固定不滚动、下方内容可滚动的效果，只需给SingleChildScrollView外层添加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(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Container(
        padding: const EdgeInsets.all(5.0),
        child: Column(
          children: [
            // 固定的红色容器
            Container(
              color: Colors.red,
              width: double.infinity,
              height: 200.0,
            ),
            // 用Expanded让滚动区域占满剩余空间
            Expanded(
              child: SingleChildScrollView(
                child: Column(
                  children: [
                    Container(
                      color: Colors.green,
                      width: double.infinity,
                      height: 200.0,
                    ),
                    Container(
                      color: Colors.orange,
                      width: double.infinity,
                      height: 200.0,
                    ),
                    Container(
                      color: Colors.green,
                      width: double.infinity,
                      height: 200.0,
                    ),
                    Container(
                      color: Colors.orange,
                      width: double.infinity,
                      height: 200.0,
                    ),
                    // 可继续添加更多容器测试滚动
                    Container(
                      color: Colors.green,
                      width: double.infinity,
                      height: 200.0,
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

原理说明 #

• 原代码中Column的子组件默认按自身高度布局，SingleChildScrollView包裹的内容过多时，Column总高度超过屏幕范围，导致底部溢出。
• Expanded会强制子组件（即SingleChildScrollView）占据Column中剩余的全部可用空间，既限制了滚动区域的高度，又保证红色容器始终固定在顶部，不会被滚动内容覆盖。

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