Flutter showModalBottomSheet 以显示在 BottomNavigationBar 的顶部

Question

我想展示一个这样的模态表

BottomsNavigationBar 上方像这样。我试过this：但是我的整个bottomNavigationBar菜单变得无法点击。

我的代码是：

  Widget build(BuildContext context) {
final theme = Theme.of(context);
final GlobalKey<ScaffoldState> _scaffoldKey = new  GlobalKey<ScaffoldState>();
return WillPopScope(
  onWillPop: () => _willPopCallback(context),
  child: Scaffold(
    key: _scaffoldKey,...

bottomNavigationBar: BottomNavigationBar(
      onTap: (v) {
            _scaffoldKey.currentState!.showBottomSheet<Null>(
 (BuildContext context){
return GridView.count....
}
}).....

那么这是我的原始代码：

@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return WillPopScope(
  onWillPop: () => _willPopCallback(context),
  child: Scaffold(
    body: PageView(
      controller: _controller,
      physics:const NeverScrollableScrollPhysics(),
      onPageChanged: (v) => setState(() => _selectedIndex = v),
      children: BottomNavigationList.pageList(context),
    ),
    bottomNavigationBar: BottomNavigationBar(
      onTap: (v) {
        setState(() {
          if (v == 3) {
            showModalBottomSheet(
...
builder: (BuildContext context){
                  return GridView.count...

但是它会在底部导航栏之上。像这样：

有什么方法可以像在第一张图片或 FAB 中那样将它夹在 BottomNavigationBar 的顶部

更新：我已经尝试了建议的实现并得到了这个：

也许让我换个说法：所以第一张图片有 3 行，最底部的一行是底部导航栏。当您在bottomNav 的selectedIndex 上单击它时，其他两行必须显示，而不会遮挡bottomNav。 @Yeasin，在您的解决方案中，紫色行必须在按下汉堡菜单时显示，并在再次按下时隐藏，这就是我使用 showModalBottomSheet 并尝试 showBottomSheet 的原因

Answer 1

您可以使用Stack 或Column 和布尔值来处理视图。

使用列

class _CustomViewState extends State<CustomView> {
  bool _showBottomSheet = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(body: LayoutBuilder(
      builder: (context, constraints) {
        return Column(
          children: [
            Expanded(
              child: CustomScrollView(
                slivers: [
                  SliverToBoxAdapter(
                    child: ElevatedButton(
                        onPressed: () {
                          setState(() {
                            _showBottomSheet = !_showBottomSheet;
                          });
                        },
                        child: Text(
                          "show btmSheet",
                        )),
                  ),
                ],
              ),
            ),
            if (_showBottomSheet)
              SizedBox(
                //get single gridWith * mainAxisCount
                height: constraints.maxWidth / 4 * 2, //based on your view
                child: GridView.count(
                  crossAxisCount: 4,
                  physics: NeverScrollableScrollPhysics(),
                  children: [
                    ...List.generate(
                      8,
                      (index) => Container(
                        color: Colors.pink,
                        child: Text("$index"),
                      ),
                    )
                  ],
                ),
              ),
            Container(
              width: constraints.maxWidth,
              color: Colors.deepPurple,
              height: kToolbarHeight,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  ...List.generate(
                    4,
                    (index) => ElevatedButton(
                      onPressed: () {
                        print("tapped on $index");
                      },
                      child: Text("$index"),
                    ),
                  )
                ],
              ),
            )
          ],
        );
      },
    ));
  }
}

使用堆栈

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

  @override
  _CustomViewState createState() => _CustomViewState();
}

class _CustomViewState extends State<CustomView> {
  bool _showBottomSheet = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(body: LayoutBuilder(
      builder: (context, constraints) {
        return Stack(
          children: [
            Align(
              alignment: Alignment.center, // based on UI,
              child: CustomScrollView(
                slivers: [
                  SliverToBoxAdapter(
                    child: ElevatedButton(
                        onPressed: () {
                          setState(() {
                            _showBottomSheet = !_showBottomSheet;
                          });
                        },
                        child: Text(
                          "show btmSheet",
                        )),
                  )
                ],
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  if (_showBottomSheet)
                    SizedBox(
                      height: 100,
                      child: GridView.count(
                        crossAxisCount: 4,
                        physics: NeverScrollableScrollPhysics(),
                        children: [
                          ...List.generate(
                              8,
                              (index) => Container(
                                    color: Colors.pink,
                                  ))
                        ],
                      ),
                    ),
                  Container(
                    width: constraints.maxWidth,
                    color: Colors.deepPurple,
                    height: kToolbarHeight,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        ...List.generate(
                          4,
                          (index) => ElevatedButton(
                            onPressed: () {
                              print("tapped on $index");
                            },
                            child: Text("$index"),
                          ),
                        )
                      ],
                    ),
                  )
                ],
              ),
            )
          ],
        );
      },
    ));
  }
}