Flutter Web：Scaffold的BottomSheet遮挡滚动视图问题

Scaffold的bottomSheet属性默认悬浮在body布局上方，不会自动为body预留空间，因此会遮挡SingleChildScrollView的底部内容。以下是两种可行的解决方式：

方法一：将bottomSheet整合到body布局中 #

把bottomSheet作为Column的底部子项，让SingleChildScrollView占据剩余可用空间，滚动区域会自然避开bottomSheet的位置，这是最简洁可靠的方案：

return Scaffold(
  appBar: AppBar(...),
  body: Column(
    children: [
      Expanded(
        child: SingleChildScrollView(
          // 你的滚动视图内容
        ),
      ),
      _buildBottomSheet(context),
    ],
  ),
);

方法二：手动为滚动视图添加底部内边距 #

如果必须保留Scaffold.bottomSheet属性，可以给SingleChildScrollView添加与bottomSheet高度匹配的底部padding：

固定高度的bottomSheet #

若bottomSheet高度固定，直接设置对应padding值：

return Scaffold(
  appBar: AppBar(...),
  bottomSheet: _buildBottomSheet(context),
  body: Padding(
    padding: const EdgeInsets.only(bottom: 60), // 与bottomSheet高度一致
    child: SingleChildScrollView(...),
  ),
);

动态高度的bottomSheet #

若bottomSheet高度自适应内容，可通过GlobalKey获取实际高度后设置padding：

class _YourPageState extends State<YourPage> {
  final _bottomSheetKey = GlobalKey();
  double _bottomSheetHeight = 0;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      setState(() {
        _bottomSheetHeight = _bottomSheetKey.currentContext?.size?.height ?? 0;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(...),
      bottomSheet: Container(
        key: _bottomSheetKey,
        // 你的bottomSheet内容
      ),
      body: Padding(
        padding: EdgeInsets.only(bottom: _bottomSheetHeight),
        child: SingleChildScrollView(...),
      ),
    );
  }
}

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