在底部导航栏上方显示底部模态表

Question

在下图中，我在单击“底部导航栏”项目时添加了 showModalBottomSheet，但 BottomNavigationBar 被模式表隐藏，所以我想让它即使底部表存在也可见。谁能帮帮我吗？

这是我的底部导航代码：

Widget _bottomNavigationBar() {
  return BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      key: scaffoldState,
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: 'Home',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.branding_watermark_outlined),
          label: 'Brands',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.category),
          label: 'Category',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.person),
          label: 'Profile',
        )
      ],
      currentIndex: _selectedIndex,
      selectedItemColor: AppColors.blue,
      onTap: (newIndex) => {
            if (newIndex == 1)
              {showBrandsBottomSheet(context)}
            else if (newIndex == 2)
              {showCategoryBottomSheet(context)}
            else
              {
                setState(() {
                  _selectedIndex = newIndex;
                })
              }
          });
}

这是我的底部模型表代码：

showBrandsBottomSheet(BuildContext context) {
  return showModalBottomSheet<void>(
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.only(
          topLeft: Radius.circular(15.0), topRight: Radius.circular(15.0)),
    ),
    context: context,
    useRootNavigator: true,
    isScrollControlled: true,
    builder: (BuildContext _) {
      return Container(
        color: Colors.white,
        height: MediaQuery.of(context).size.height / 2,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(right: 5, top: 3),
                child: GestureDetector(
                  onTap: () {
                    Navigator.pop(context);
                  },
                  child: const Align(
                      alignment: Alignment.topRight,
                      child: Icon(Icons.close)),
                ),
              ),
              Container(
                color: Colors.white,
                height: 350,
                child: ListView.builder(
                  key: Key('builder ${_selected.toString()}'), //a
                  scrollDirection: Axis.vertical,
                  // shrinkWrap: true,
                  // physics: NeverScrollableScrollPhysics(),
                  itemCount: brandList.length,
                  itemBuilder: (BuildContext context, int index) {
                    return Theme(
                        data: Theme.of(context)
                            .copyWith(dividerColor: Colors.white),
                        child: ExpansionTile(
                          // tilePadding: const EdgeInsets.all(0),
                          key: Key(index.toString()), //attention
                          initiallyExpanded: index == _selected, //attention
                          collapsedIconColor: Colors.blue,
                          iconColor: Colors.blue,
                          backgroundColor: Colors.white,
                          title: Text(
                            brandList[index],
                            style: const TextStyle(
                                fontSize: 13.0,
                                color: Colors.black,
                                fontWeight: FontWeight.w600),
                          ),
                          children: <Widget>[
                            Container(
                              color: Colors.blue[50],
                              child: Column(
                                children: _buildExpandableBrands(brandList),
                              ),
                            ),
                          ],
                          onExpansionChanged: ((newState) {
                            if (newState) {
                              setState(() {
                                const Duration(seconds: 20000);
                                _selected = index;
                              });
                            } else {
                              setState(() {
                                _selected = -1;
                              });
                            }
                          }),
                        ));
                  },
                ),
              ),
            ],
          ),
        ),
      );
    },
  );
}

Answer 1

设置 useRootNavigator=true。这将在所有其他内容之上显示模型表。

showModalBottomSheet(
     context: context,
     isScrollControlled: true,
     useRootNavigator: true,
     builder: (context) {
     return BottomBarView(
     );
});

Answer 2

最后，这个问题帮助我完成了这件事。

这是我的工作代码：

Widget _bottomNavigationBar() {
    return BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        key: scaffoldState,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.branding_watermark_outlined),
            label: 'Brands',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.category),
            label: 'Category',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          )
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: AppColors.blue,
        onTap: (newIndex) => {
              if (newIndex == 1)
                {
                  _scaffoldKey.currentState?.showBottomSheet((_) => Container(
                        child: showBrandsBottomSheet(),
                      ))
                }
              else if (newIndex == 2)
                {
                  {
                    _scaffoldKey.currentState?.showBottomSheet((_) => Container(
                          child: showCategoryBottomSheet(),
                        ))
                  }
                }
              else
                {
                  setState(() {
                    _selectedIndex = newIndex;
                  })
                }
            });
  }

显示品牌底表：

showBrandsBottomSheet() {
    return Container(
      color: Colors.white,
      height: MediaQuery.of(context).size.height / 2,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(right: 5, top: 3),
              child: GestureDetector(
                onTap: () {
                  Navigator.pop(context);
                },
                child: const Align(
                    alignment: Alignment.topRight, child: Icon(Icons.close)),
              ),
            ),
            Container(
              color: Colors.white,
              height: 350,
              child: ListView.builder(
                key: UniqueKey(),
                scrollDirection: Axis.vertical,
                itemCount: brandList.length,
                itemBuilder: (BuildContext context, int index) {
                  cardKeyList.add(GlobalKey(debugLabel: "index :$index"));
                  return Theme(
                      data: Theme.of(context)
                          .copyWith(dividerColor: Colors.white),
                      child: ExpansionTileCard(
                        key: cardKeyList[index],
                        initiallyExpanded: false,
                        title: Text(
                          brandList[index],
                          style: const TextStyle(
                              fontSize: 13.0,
                              color: Colors.black,
                              fontWeight: FontWeight.w600),
                        ),
                        children: <Widget>[
                          Container(
                            color: Colors.blue[50],
                            child: Column(
                              children: _buildExpandableBrands(brandList),
                            ),
                          ),
                        ],
                        onExpansionChanged: (value) {
                          if (value) {
                            Future.delayed(const Duration(milliseconds: 200),
                                () {
                              for (var i = 0; i < cardKeyList.length; i++) {
                                if (index != i) {
                                  cardKeyList[i].currentState?.collapse();
                                }
                              }
                            });
                          }
                        },
                      ));
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

现在它开始显示在底部导航上方。

Answer 3

我也面临同样的问题，我想显示模式底部工作表，但该工作表不应隐藏底部栏，并且我还想显示显示底部工作表的按钮以启用和禁用底部工作表 所以我在堆栈小部件中使用了 DraggableScrollableSheet ，它将在底部工作表顶部显示按钮

 if (isShowBottomListSheet)
                      DraggableScrollableSheet(
                        initialChildSize: 0.3,
                        // Starts at 30% of screen height
                        minChildSize: 0.3,
                        // Minimum size when collapsed
                        maxChildSize: 1.0,
                        // Maximum size when fully expanded
                        builder: (context, scrollController) {
                          return Container(
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.vertical(
                                  top: Radius.circular(20)),
                              boxShadow: [
                                BoxShadow(
                                    color: Colors.black26, blurRadius: 10)
                              ],
                            ),
                            child: ListView.builder(
                              controller: scrollController,
                              itemCount: 20, // Example list of items
                              itemBuilder: (context, index) {
                                return ListTile(
                                  title: Text('Item $index'),
                                );
                              },
                            ),
                          );
                        },
                      ),
[enter image description here][1]