Question

如何在底部导航栏中的相关页面之间添加平滑过渡？

我的代码：

class _NavBarState extends State<NavBar>{
  int _selectedPage = 0;
  final _pageOptions = [
    MapScreen(),
    HomeScreen(),
    ProfileScreen()
  ];


  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        body: _pageOptions[_selectedPage],
        bottomNavigationBar: BottomNavigationBar(
          elevation: 0.0,
          backgroundColor: Colors.transparent,
          currentIndex: _selectedPage,
          selectedIconTheme: IconThemeData(color: Colors.blue),
          // showSelectedLabels: true,
          onTap: (int index){
            setState(() {
              _selectedPage = index;
            });
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.location_on, color: Colors.black,),
              // title: Text('MAPS', style: TextStyle(letterSpacing: 2.0, fontWeight: FontWeight.bold)),
              title: Padding(padding: EdgeInsets.all(0),),              
            ),
            BottomNavigationBarItem(
              icon:Icon(Icons.home, color: Colors.black,),
              title: Padding(padding: EdgeInsets.all(0),)
            ),
            BottomNavigationBarItem(
              icon:Icon(Icons.person, color: Colors.black,),
              title: Padding(padding: EdgeInsets.all(0),)
            ),
          ]
        ),
        )
    );
  }

感谢您的帮助

///////////////////////////////////////////////// //////////////////////////////////////////////////// /////////////////////////////

Answer 1

使用PageView在页面之间导航并添加平滑的过渡：

class _NavBarState extends State<NavBar> {
  int _selectedPage = 0;

  PageController pageController = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: pageController,
        children: <Widget>[
          MapScreen(),
          HomeScreen(),
          ProfileScreen(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        elevation: 0.0,
        backgroundColor: Colors.transparent,
        currentIndex: _selectedPage,
        unselectedItemColor: Colors.black,   //here the unselected color
        selectedIconTheme: IconThemeData(color: Colors.blue),
        //showSelectedLabels: true,
        onTap: (int index) {
          setState(() {
            _selectedPage = index;
          });

          pageController.animateToPage(
            index,
            duration: Duration(milliseconds: 500),
            curve:
                Curves.easeIn, //define the curve and duration of the transition
          );
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(
              Icons.location_on,
            ),
            // title: Text('MAPS', style: TextStyle(letterSpacing: 2.0, fontWeight: FontWeight.bold)),
            title: Padding(
              padding: EdgeInsets.all(0),
            ),
          ),
          BottomNavigationBarItem(
              icon: Icon(
                Icons.home,
              ),
              title: Padding(
                padding: EdgeInsets.all(0),
              )),
          BottomNavigationBarItem(
            icon: Icon(
              Icons.person,
            ),
            title: Padding(
              padding: EdgeInsets.all(0),
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    pageController.dispose();
    super.dispose();
  }
}

导航栏中的过渡

1 个答案: