flutter底部导航栏和页面组件代码片

DART

class _PageTestState extends State<PageTest> with TickerProviderStateMixin {
  late PageController _pageController;
  int _bottomNavigationBarIndex = 0;

  @override
  void initState() {
    _pageController = PageController();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text(
            "若轻视频",
            style: TextStyle(color: Colors.white),
          ),
        ),
        // 底部导航栏创建
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(icon: Icon(Icons.tv), label: "电视"),
            BottomNavigationBarItem(
                icon: Icon(Icons.ondemand_video_sharp), label: "视频")
          ],
          // 显示的底部导航栏图标下标
          currentIndex: _bottomNavigationBarIndex,
          // 底部导航栏图标被点击后触发的事件
          onTap: _onBottomNavigationBarTapped,
        ),
        // 创建底部导航栏对应的不同页面
        body: PageView(
          controller: _pageController,
          // 页面更改后触发的事件
          onPageChanged: _changeBottomNavigationBar,
          children: const [
            Text("1"),
            Text("2"),
          ],
        ));
  }

  void _onBottomNavigationBarTapped(int index) {
    _pageController.animateToPage(index,
        duration: const Duration(milliseconds: 500), curve: Curves.ease);
  }

  void _changeBottomNavigationBar(int index) {
    setState(() {
      _bottomNavigationBarIndex = index;
    });
  }
}

如果想底部导航栏的悬浮图标显示在中间，可以参考这个