如何让BottomSheet模态不覆盖底部导航栏

Question

我有一个 BottomSheet 模式，我从 BottomNavigationBar 调用它。即使模式打开，我仍然希望能够访问底部导航栏。我尝试使用

useRootNavigator: true,

但仍然无法访问底部导航栏。 我按如下方式调用模态：

void _onItemTapped(int index) async {
    setState(() {
      _selectedIndex = index;
    });

    if (index == 4) {
      if (_controller.isCompleted) {
        _controller.reverse();
      } else {
        _controller.forward();
        await showModalBottomSheet(
          useRootNavigator: true,
          context: context,
          isScrollControlled: true,
          backgroundColor: Colors.transparent,
          builder: (context) => DraggableScrollableSheet(
            initialChildSize:
                0.9, 
            maxChildSize:
                0.9, 
            minChildSize: 0.3, // Minimum height of the modal.
            builder: (_, controller) => ListView(
              controller: controller,
              children: [
                MoreOptionsModal(),
              ],
            ),
          ),
        );
        _controller.reverse();
      }
    } else {
      _controller.reverse();
    }
  }

...
 body: SafeArea(child: _screens.elementAt(_selectedIndex).body!),
 bottomNavigationBar: BottomNavigationBar(
        items: _buildBottomNavItems(),
        currentIndex: _selectedIndex,
        onTap: 
          _onItemTapped
        ,)

我相信这与这里的讨论有关https://github.com/flutter/flutter/issues/140812不幸的是它在没有解决问题的情况下关闭了。

Answer 1

正如

showModalBottomSheet

函数的 documentation 所提到的，它是菜单或对话框的替代方案，可防止用户在应用程序打开时与应用程序的其余部分进行交互。

就您而言，我相信您需要的是

ScaffoldState.showBottomSheet

。此方法在最近的

Scaffold

中显示 Material Design 底部工作表，从而允许底部导航栏保持可访问性。

这是一个演示如何实现所需行为的示例：

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      home: ExampleApp(),
    ),
  );
}

class ExampleApp extends StatefulWidget {
  const ExampleApp({super.key});

  @override
  State<ExampleApp> createState() => _ExampleAppState();
}

class _ExampleAppState extends State<ExampleApp> {
  final _scaffoldKey = GlobalKey<ScaffoldState>();
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: const Text('Example App'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() => _currentIndex = index);

          _scaffoldKey.currentState?.showBottomSheet(
            showDragHandle: true,
            (_) => SizedBox(
              height: 100,
              width: double.infinity,
              child: Center(
                child: Text('Bottom Sheet Index: $_currentIndex'),
              ),
            ),
          );
        },
      ),
      body: Center(
        child: Text('Page Index: $_currentIndex'),
      ),
    );
  }
}