Question

我有一个当前无法切换页面的底部导航项，我感觉我没有正确实现此目的，但是我不确定该怎么做

class bottomNavigation extends StatefulWidget {
  @override
  _bottomNavigation createState() => _bottomNavigation();
}

class _bottomNavigation extends State<bottomNavigation> {
  int currentNavItem = 0;

  homeScreen home;
  agendaScreen agenda;
  List<Widget> pages;
  Widget currentPage;

  @override
  void initState(){
    home = homeScreen();
    agenda = agendaScreen();

    pages = [home, agenda];

    currentPage = home;
    super.initState();
  }



  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      selectedItemColor: Colors.deepPurpleAccent,
      unselectedItemColor: Colors.grey,
      selectedFontSize: 16,
      currentIndex: currentNavItem,
      onTap: (int index) {
        setState(() {
            currentNavItem = index;
            currentPage = pages[index];
          },
        );
      },
      items: [
        BottomNavigationBarItem(
          icon: Icon(
            Icons.home,
          ),
          title: Text("Home"),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.calendar_today),
          title: Text("Agenda"),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.shopping_cart),
          title: Text("Orders"),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.account_balance_wallet),
          title: Text("Wallet"),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.message),
          title: Text("Chat"),
        ),
      ],
    );
  }
}

当我单击列表中的“议程”项目时，我希望看到议程页面。为了正确实现BottomNavigationBar，我在哪里出了错

Answer 1

您应该将BottomNavigationBar小部件放在Scaffold内。

下面是一个示例，摘自Flutter SDK Site：

int _selectedIndex = 0;
static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);

// Implement body for each page here, separated by coma, in this example, we create a simple Text widget as the body for each page.
static const List<Widget> _widgetOptions = <Widget>[
  Text(
    'Index 0: Home',
    style: optionStyle,
  ),
  Text(
     'Index 1: Business',
     style: optionStyle,
  ),
  Text(
     'Index 2: School',
     style: optionStyle,
  ),
];

// When user tap on one of the navigation item
void _onItemTapped(int index) {
  setState(() {
    _selectedIndex = index;
  });
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('BottomNavigationBar Sample'),
    ),
    body: Center(
      child: _widgetOptions.elementAt(_selectedIndex),
    ),
    bottomNavigationBar: BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          title: Text('Home'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.business),
          title: Text('Business'),
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.school),
          title: Text('School'),
        ),
      ],
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.amber[800],
      onTap: _onItemTapped,
    ),
  );
}

Answer 2

无论何时更改[State]对象的内部状态，都要在传递给[setState]的函数中进行更改。基本上，您需要做两件事-

将以下方法添加到您的课程中：

void onItemTapped(int index) {
  setState(() {
    currentNavItem = index;
    currentPage = pages[index];
  });
}

将此函数传递给onTab：

onTap: (int index){   
              setState(() {
                onItemTapped(index);
              });
          },

Flutter bottomNavigationBar不能更改页面

2 个答案: