Flutter中底部导航栏的转换

Question

是否可以更改bottomNavigationBar中项目的路由转换？我的意思是当您点击bottomNavigationBar中的任何一个项目时，主体会以自定义动画的方式进行漂亮的动画更改。 例如：

class MyCustomRoute<T> extends MaterialPageRoute<T> {
  MyCustomRoute({ WidgetBuilder builder, RouteSettings settings })
      : super(builder: builder, settings: settings);

  @override
  Widget buildTransitions(BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      Widget child) {
    if (settings.isInitialRoute)
      return child;
    return new FadeTransition(opacity: animation, child: child);
  }
}

- mohammad

---

以下是可能的解决方案：https://dev59.com/NlUL5IYBdhLWcg3w3LQH#59133502。只需将MaterialPageRoute更改为PageRouteBuilder并设置transitionBuilder（例如SlideTransition）。 - Alex.Marynovskyi

你可以查看名为Animations的Flutter包，并观看YouTube上的短片以了解如何设置它。 https://youtu.be/nY5_fW7_mqc?t=1180 - Apps 247

Answer 1

尝试使用PageView：

class _MyHomePageState extends State<MyHomePage> {



int _selectedIndex = 0;
  PageController _pageController;

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Nav Bar")),
      body: SizedBox.expand(
        child: PageView(
          controller: _pageController,
          onPageChanged: (index) {
            setState(() => _selectedIndex = index);
          },
          children: <Widget>[
            Container(color: Colors.blueGrey,),
            Container(color: Colors.red,),
            Container(color: Colors.green,),
            Container(color: Colors.blue,),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.black,
        onTap: _onItemTapped,
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            title: Text('Item One'),
            icon: Icon(Icons.home)
          ),
          BottomNavigationBarItem(
            title: Text('Item One'),
            icon: Icon(Icons.apps),
            backgroundColor: Colors.lightBlue,
          ),
          BottomNavigationBarItem(
            title: Text('Item One'),
            icon: Icon(Icons.chat_bubble),
            backgroundColor: Colors.lightBlue,
          ),
          BottomNavigationBarItem(
            title: Text('Item One'),
            icon: Icon(Icons.settings),
            backgroundColor: Colors.lightBlue,
          ),
        ],
      ),
    );
  }


void _onItemTapped(int index) {
    setState(() {
_selectedIndex = index;
          //
          //
          //using this page controller you can make beautiful animation effects
          _pageController.animateToPage(index,
              duration: Duration(milliseconds: 500), curve: Curves.easeOut);
});
  }
}

- evals

---

@ChristopherNolan XD - evals