如何使底部导航栏通过onSelected更改页面？

Question

我正在使用bottom_navy_bar 5.3.2创建底部导航栏，但是问题是当我选择一个图标时，它并没有改变页面。

import 'package:bottom_navy_bar/bottom_navy_bar.dart';

当我向左和向右滑动时效果很好，但是在选择时不起作用。

我该如何实现？

代码：

body: SizedBox.expand(
        child: PageView(
          controller: _pageController,
          children: <Widget>[
            Home(),
            Center(child:Text("data")),
            Center(child:Text("data")),
            Center(child:Text("data")),
          ],
          onPageChanged: (int index){
            setState(() {
              _currentIndex = index;
            });
          },
        ),
      ),
      bottomNavigationBar: BottomNavyBar(
        selectedIndex: _currentIndex,
        showElevation: true, // use this to remove appBar's elevation 
        onItemSelected: (index) {
          setState(() => _currentIndex = index);
          _pageController.jumpToPage(index);
        },
        items: [
          BottomNavyBarItem(
            icon: Icon(Icons.apps),
            title: Text('Challenges'),
            activeColor: Colors.red,
          ),
          BottomNavyBarItem(
              icon: Icon(Icons.people),
              title: Text('Users'),
              activeColor: Colors.purpleAccent
          ),
          BottomNavyBarItem(
              icon: Icon(Icons.message),
              title: Text('Messages'),
              activeColor: Colors.pink
          ),
          BottomNavyBarItem(
              icon: Icon(Icons.settings),
              title: Text('Settings'),
              activeColor: Colors.blue
          ),
        ],
      )

Answer 1

您的代码工作正常。我认为您没有注意到这些更改，因为每个选定的导航栏项目的PageView的假发都是相同的。尝试以下代码：

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;
  PageController _pageController = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text(widget.title),), 
        body: SizedBox.expand(
          child: PageView(
            controller: _pageController,
            children: List.generate(4, (index) {
              return Container(child: Center(child:Text("data $index"),),
                color: Colors.primaries.elementAt(index),
              );
            }),
            onPageChanged: (int index) {
              setState(() => _currentIndex = index);
            },
          ),
        ),
        bottomNavigationBar: BottomNavyBar(
          selectedIndex: _currentIndex,
          showElevation: true, // use this to remove appBar's elevation
          onItemSelected: (index) {
            setState(() => _currentIndex = index);
            _pageController.jumpToPage(index);
          },
          items: [
            BottomNavyBarItem(
              icon: Icon(Icons.apps),
              title: Text('Challenges'),
              activeColor: Colors.red,
            ),
            BottomNavyBarItem(
                icon: Icon(Icons.people),
                title: Text('Users'),
                activeColor: Colors.purpleAccent
            ),
            BottomNavyBarItem(
                icon: Icon(Icons.message),
                title: Text('Messages'),
                activeColor: Colors.pink
            ),
            BottomNavyBarItem(
                icon: Icon(Icons.settings),
                title: Text('Settings'),
                activeColor: Colors.blue
            ),
          ],
        )
    );
  }
}

请注意，我刚刚更新了代码，以便在选择BottomNavyBarItem时，它会在页面的Container中显示不同颜色的PageView。