Flutter：使用Slivers布局时如何解决底部溢出（Bottom Overflowed）错误？

开发Flutter应用时遇到"Bottom Overflowed"底部溢出错误，尝试用Flexible、Expanded包裹组件，以及SingleChildScrollView均无法解决——因为需要页面整体滚动而非仅Tab内容单独滚动。点击展开TabBarView中较长内容时会触发该错误，需在保留当前布局结构的前提下解决问题。

原代码 #

页面build方法 #

Widget build(BuildContext context) {
  return Scaffold(
    resizeToAvoidBottomInset: false,
    appBar: AppBar(
      title: const Text('title'),
      centerTitle: false,
      automaticallyImplyLeading: false,
    ),
    body: Builder(builder: (context) {
      return CustomScrollView(
        slivers: [
          SliverToBoxAdapter(
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.only(bottom: 25.0),
                  child: DepotInventarSliderFlex(),
                ),
                const Divider(
                  thickness: 0.5,
                  color: Colors.black,
                ),
                Container(
                  padding: const EdgeInsets.symmetric(
                    horizontal: 15.0,
                    vertical: 10.0,
                  ),
                  child: const Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Padding(
                        padding: EdgeInsets.only(bottom: 10.0),
                        child: Text(
                          style: TextStyle(
                            fontSize: 23.0,
                          ),
                          'some text',
                        ),
                      ),
                      Text(
                        style: TextStyle(
                          fontSize: 15.0,
                        ),
                        'some text',
                      ),
                    ],
                  ),
                ),
                TabBar(
                  controller: tabController,
                  tabs: const [
                    Tab(text: 'Tab 1'),
                    Tab(text: 'Tab 2'),
                    Tab(text: 'Tab 3'),
                  ],
                ),
              ],
            ),
          ),
          SliverPersistentHeader(
            delegate: _StickyTabBarDelegate(
              child: const CartFloatingButton(),
            ),
            pinned: true,
          ),
          SliverFillRemaining(
            child: TabBarView(
              controller: tabController,
              children: [
                _getTabContentAt(0),
                _getTabContentAt(1),
                _getTabContentAt(2),
              ],
            ),
          ),
        ],
      );
    }),
  );
}

Tab内容获取方法 #

Widget _getTabContentAt(int index) {
  List<Widget> tabContents = [
    Column(
      children: [
        ExpandableButtonList(
          buttons: testData,
        ),
      ],
    ),
    Column(
      children: [
        ExpandableButtonList(
          buttons: testData,
        ),
      ],
    ),
    const Card(
      margin: EdgeInsets.all(16.0),
      child: Center(child: Text('...')),
    ),
  ];
  return tabContents[index];
}

可展开按钮列表State类 #

class _ExpandableButtonListState extends State<ExpandableButtonList> {
  int _selectedIndex = -1;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          padding: const EdgeInsets.symmetric(horizontal: 15.0),
          width: double.infinity,
          child: Wrap(
            alignment: WrapAlignment.start,
            runAlignment: WrapAlignment.start,
            spacing: 8.0,
            children: [
              for (var i = 0; i < widget.buttons.length; i++)
                TerminalTapBarButton(
                  label: widget.buttons[i].label,
                  isSelected: _selectedIndex == i,
                  onPressed: () {
                    setState(() {
                      _selectedIndex = _selectedIndex == i ? -1 : i;
                    });
                  },
                )
            ],
          ),
        ),
        if (_selectedIndex != -1)
          Items(items: widget.buttons[_selectedIndex].items),
      ],
    );
  }
}

解决方案 #

核心是改用NestedScrollView替代CustomScrollView，它能更好地处理包含可滚动Tab内容的整体滚动布局，同时通过SliverOverlapAbsorber处理固定头部与滚动内容的重叠问题，确保整体滚动时布局计算正确，避免底部溢出。

修改后的页面build方法：

Widget build(BuildContext context) {
  return Scaffold(
    resizeToAvoidBottomInset: false,
    appBar: AppBar(
      title: const Text('Title'),
      centerTitle: false,
      automaticallyImplyLeading: false,
    ),
    body: Builder(builder: (context) {
      return NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return <Widget>[
            SliverToBoxAdapter(
              child: Container(
                padding: const EdgeInsets.symmetric(
                  horizontal: 15.0,
                  vertical: 10.0,
                ),
                child: const Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      padding: EdgeInsets.only(bottom: 10.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            'Some text',
                            style: TextStyle(
                              fontSize: 23.0,
                            ),
                          ),
                          Icon(
                            Icons.info_outline_rounded,
                            size: 25,
                          ),
                        ],
                      ),
                    ),
                    Text(
                      'Some text',
                      style: TextStyle(
                        fontSize: 15.0,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            SliverOverlapAbsorber(
              handle:
                  NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              sliver: SliverPersistentHeader(
                delegate: CartFloatingButtonDelegate(
                  child: const CartFloatingButton(),
                ),
                pinned: true,
              ),
            ),
            SliverToBoxAdapter(
              child: TabBar(
                controller: tabController,
                isScrollable: true,
                tabs: const [
                  Tab(text: 'Tab 1'),
                  Tab(text: 'Tab 2'),
                  Tab(text: 'Tab 3'),
                ],
              ),
            ),
          ];
        },
        body: TabBarView(
          controller: tabController,
          children: [
            _getTabContentAt(0),
            _getTabContentAt(1),
            _getTabContentAt(2),
          ],
        ),
      );
    }),
  );
}

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