Flutter底部导航悬浮效果BottomNavigationBar:BottomAppBar

描述：

使用BottomNavigationBar:BottomAppBar实现底部导航浮效果

效果图：

代码：

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

  @override
  State<TabNavTest> createState() => _TabNavTestState();
}

class _TabNavTestState extends State<TabNavTest> {
  // 当前页面索引
  int _curIndex = 0;
  // body界面
  final List<Widget> _pages = const [
    HomePage(),
    NewsPage(),
    PractticePage(),
    ProfilePage(),
    FloatPage()
  ];

  _setCurIndex(int index) {
    setState(() {
      _curIndex = index;
    });
  }

  // 页面控制器
  final PageController _pageCtr = PageController();
  @override
  void dispose() {
    _pageCtr.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        children: _pages,
        index: _curIndex,
      ),
      bottomNavigationBar: BottomAppBar(
        shape: const CircularNotchedRectangle(),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            IconButton(
              onPressed: () => _setCurIndex(0),
              icon: Icon(
                Icons.home_filled,
                color: _curIndex == 0 ? Colors.teal : Colors.grey,
              ),
            ),
            IconButton(
              onPressed: () => _setCurIndex(1),
              icon: Icon(
                Icons.messenger_sharp,
                color: _curIndex == 1 ? Colors.teal : Colors.grey,
              ),
            ),
            const Text(''),
            IconButton(
              onPressed: () => _setCurIndex(2),
              icon: Icon(
                Icons.menu_book_rounded,
                color: _curIndex == 2 ? Colors.teal : Colors.grey,
              ),
            ),
            IconButton(
              onPressed: () => _setCurIndex(3),
              icon: Icon(
                Icons.person_pin_circle_sharp,
                color: _curIndex == 3 ? Colors.teal : Colors.grey,
              ),
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _setCurIndex(4),
        backgroundColor: _curIndex == 4 ? Colors.teal : Colors.white,
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
    );
  }
}