如何使底部导航栏通过 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 的 wiget 对于每个选定的导航栏项目都是相同的。试试下面的代码：

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

Note that I've just updated your code so that when a BottomNavyBarItem is selected it shows a Container with a different color in the PageView of your page.

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

How can I make the bottom navbar to change pages by onSelected?

android

dart

flutter

bottomnavigationview