Flutter底部导航栏显隐时RenderFlex底部溢出问题求助

你遇到的错误：

A RenderFlex overflowed by 14 pixels on the bottom.

问题根源 #

1. BottomNavigationBar固有高度冲突：你用AnimatedContainer强制设置高度为0或100，但BottomNavigationBar本身有系统默认最小高度（移动端通常为56px），强制设置高度会导致布局计算错误，挤压出额外空间引发溢出。
2. 加载指示器布局重叠：底部加载进度指示器固定在bottom:0，当导航栏显示时，指示器会和导航栏重叠，进一步触发布局溢出。

修复方案 #

放弃修改容器高度的方式，改用Flutter自带的SizeTransition实现平滑显隐动画，同时调整列表和指示器的布局逻辑：

完整修复代码 #

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class Home extends StatefulWidget {
  Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
  final ScrollController _scrollController = ScrollController();
  List<String> items = [];
  bool loading = false, allLoaded = false;
  bool _showNavBar = true;
  late final AnimationController _navBarAnimationController;

  mockFetch() async {
    if (allLoaded) return;

    setState(() => loading = true);
    await Future.delayed(const Duration(milliseconds: 500));

    List<String> newData = items.length >= 60 
        ? [] 
        : List.generate(20, (index) => "List Item ${index + items.length}");

    if (newData.isNotEmpty) items.addAll(newData);

    setState(() {
      loading = false;
      allLoaded = newData.isEmpty;
    });
  }

  @override
  void initState() {
    super.initState();
    mockFetch();
    _navBarAnimationController = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 300),
    )..value = 1; // 初始状态显示导航栏

    _scrollController.addListener(() {
      final scrollDir = _scrollController.position.userScrollDirection;
      // 避免频繁切换状态，仅在方向改变且状态不匹配时更新
      if (scrollDir == ScrollDirection.reverse && _showNavBar) {
        setState(() => _showNavBar = false);
        _navBarAnimationController.reverse();
      } else if (scrollDir == ScrollDirection.forward && !_showNavBar) {
        setState(() => _showNavBar = true);
        _navBarAnimationController.forward();
      }

      if (_scrollController.position.pixels >= _scrollController.position.maxScrollExtent && !loading) {
        mockFetch();
      }
    });
  }

  @override
  void dispose() {
    _scrollController.dispose();
    _navBarAnimationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final navBarHeight = kBottomNavigationBarHeight;
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.deepOrange,
        title: const Text("Home Page"),
      ),
      body: LayoutBuilder(builder: (context, constraints) {
        if (items.isNotEmpty) {
          return Stack(
            children: [
              ListView.separated(
                controller: _scrollController,
                // 根据导航栏状态和加载状态设置底部内边距
                padding: EdgeInsets.only(
                  bottom: (_showNavBar ? navBarHeight : 0) + (loading ? 80 : 0),
                ),
                itemBuilder: (context, index) {
                  if (index < items.length) {
                    return ListTile(title: Text(items[index]));
                  } else {
                    return Container(
                      width: constraints.maxWidth,
                      height: 50,
                      child: const Center(child: Text("Nothing more to load")),
                    );
                  }
                },
                separatorBuilder: (context, index) => const Divider(height: 1),
                itemCount: items.length + (allLoaded ? 1 : 0),
              ),
              if (loading)
                Positioned(
                  left: 0,
                  // 加载指示器放在导航栏上方（如果导航栏显示）
                  bottom: _showNavBar ? navBarHeight : 0,
                  child: Container(
                    width: constraints.maxWidth,
                    height: 80,
                    child: const Center(child: CircularProgressIndicator()),
                  ),
                ),
            ],
          );
        } else {
          return const Center(child: CircularProgressIndicator());
        }
      }),
      bottomNavigationBar: SizeTransition(
        sizeFactor: _navBarAnimationController,
        axisAlignment: -1, // 从底部向上收缩/展开
        child: BottomNavigationBar(
          backgroundColor: Colors.amber[200],
          items: const [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.child_friendly),
              label: 'Child',
            ),
          ],
        ),
      ),
    );
  }
}

核心修复说明 #

• 用SizeTransition替代AnimatedContainer：通过动画控制器控制导航栏显隐动画，完全遵循BottomNavigationBar的固有高度，避免布局计算错误。
• 动态调整ListView内边距：根据导航栏是否显示、是否加载中，给列表底部留出足够空间，防止内容被遮挡或挤压。
• 优化滚动监听逻辑：添加状态判断，避免频繁触发setState导致的性能问题和布局抖动。
• 调整加载指示器位置：导航栏显示时，把指示器放在导航栏上方，避免重叠引发溢出。

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