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);
  }
}

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);
});
  }
}

底部导航栏在颤动中过渡

1 个答案: