如何摆脱 Flutter 中多余的 BottomAppBar？

Question

我有额外的页脚 BottomAppBar，我不想在那里。我希望底部导航栏嵌套在底部应用栏中，因为我仍然想保留浮动操作按钮的缺口。屏幕截图显示得很清楚，因为它是红色的。

这是我的代码：

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: Size.fromHeight(0),
        child: AppBar(
          elevation: 0,
          backgroundColor: Colors.transparent.withOpacity(0.4),
        ),
      ),
      extendBodyBehindAppBar: true,
      body: Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.blue,
      ),
      bottomNavigationBar: bottomNavBar,
      floatingActionButton: addPostButton,
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }

  Widget get bottomNavBar {
    return BottomAppBar(
      color: Colors.red,
      shape: CircularNotchedRectangle(),
      elevation: 0,
      notchMargin: 10,
      child: BottomNavigationBar(
        elevation: 0,
        items: [
          BottomNavigationBarItem(
            icon: Icon(MdiIcons.homeOutline),
            activeIcon: Icon(MdiIcons.home),
            title: Text("Home"),
          ),
          BottomNavigationBarItem(
            icon: Icon(MdiIcons.accountOutline),
            activeIcon: Icon(MdiIcons.account),
            title: Text("Profile"),
          ),
        ],
      ),
    );
  }

  Widget get addPostButton {
    return FloatingActionButton(
      focusElevation: 0,
      onPressed: () {},
      child: Icon(
        MdiIcons.mapMarkerPlusOutline,
        size: 30,
      ),
    );
  }
}

Answer 1

按照以下更改您的代码，然后检查：

 Widget get bottomNavBar {
  return BottomNavigationBar(
    elevation: 0,
    items: [
      BottomNavigationBarItem(
        icon: Icon(MdiIcons.homeOutline),
        activeIcon: Icon(MdiIcons.home),
        title: Text("Home"),
      ),
      BottomNavigationBarItem(
        icon: Icon(MdiIcons.accountOutline),
        activeIcon: Icon(MdiIcons.account),
        title: Text("Profile"),
      ),
    ],
   );
  }