ReorderableListView最后一项被BottomAppBar遮挡的解决问询

问题原因 #

当设置extendBody: true时，ReorderableListView.builder不会像普通ListView那样自动添加底部内边距避开BottomAppBar，导致最后一项被导航栏遮挡；而普通ListView内部有默认的padding处理逻辑，因此不会出现该问题。

解决方案 #

我们可以手动给ReorderableListView.builder添加底部内边距，让列表最后一项能滚动到BottomAppBar上方的可见区域，同时保留extendBody实现的透明凹口效果。

方案一：固定高度内边距（适用于BottomAppBar高度固定的场景） #

直接在ReorderableListView.builder的padding参数中添加等于BottomAppBar高度的底部内边距：

ReorderableListView.builder(
  padding: EdgeInsets.only(bottom: 60), // 与BottomAppBar的height值一致
  itemCount: myList.length,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      key: ValueKey(myList[index]),
      height: 150,
      color: Colors.green,
      child: Center(child: Text('Entry ${myList[index]}')),
    );
  },
  onReorder: (oldIndex, newIndex){
    if (newIndex > oldIndex) newIndex --;
    final item = myList.removeAt(oldIndex);
    myList.insert(newIndex, item);
  },
),

方案二：动态获取高度（适配不同设备与动态高度场景） #

如果BottomAppBar高度不固定，或者需要适配设备底部安全区域，可以通过MediaQuery动态计算内边距：

ReorderableListView.builder(
  padding: EdgeInsets.only(
    bottom: MediaQuery.of(context).padding.bottom + 60 // 系统底部安全区高度 + BottomAppBar高度
  ),
  itemCount: myList.length,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      key: ValueKey(myList[index]),
      height: 150,
      color: Colors.green,
      child: Center(child: Text('Entry ${myList[index]}')),
    );
  },
  onReorder: (oldIndex, newIndex){
    if (newIndex > oldIndex) newIndex --;
    final item = myList.removeAt(oldIndex);
    myList.insert(newIndex, item);
  },
),

修改后的完整代码 #

import 'package:flutter/material.dart';

void main() {
  runApp(SO());
}

class SO extends StatelessWidget {
  List<String> myList = ["a", "b", "c", "d", "e", "f", "g", "h"];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Builder(
            builder: (context) => Scaffold(
              extendBody: true,
              appBar: AppBar(),
              body: ReorderableListView.builder(
                  padding: EdgeInsets.only(bottom: 60), // 关键修改：添加底部内边距
                  itemCount: myList.length,
                  itemBuilder: (BuildContext context, int index) {
                    return Container(
                      key: ValueKey(myList[index]),
                      height: 150,
                      color: Colors.green,
                      child: Center(child: Text('Entry ${myList[index]}')),
                    );
                  },
                onReorder: (oldIndex, newIndex){
                  if (newIndex > oldIndex) newIndex --;
                  final item = myList.removeAt(oldIndex);
                  myList.insert(newIndex, item);
              },
              ),
              floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
              floatingActionButton: FloatingActionButton(
                onPressed: () {},
              ),
              bottomNavigationBar: BottomAppBar(
                shape: const CircularNotchedRectangle(),
                notchMargin: 18,
                color: Colors.blue,
                child: Container(
                  height: 60,
                ),
              ),
            )
        )
    );
  }
}

修改后既能保留extendBody带来的透明凹口效果，又能让最后一项列表内容正常滚动到可见区域。

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