Question

我在底部有一个底部导航栏，我想要的是单击底部栏的各个小部件，它应该将我导航到下一页

    Widget _bottemTab() {
    return new BottomNavigationBar(


    currentIndex: _currentIndex,
    onTap:(newIndex) => setState((){_currentIndex = newIndex;}),
    type: BottomNavigationBarType.fixed,
    items: [
      new BottomNavigationBarItem(
          icon: Image.asset(
            "assets/home.png",
            width: 24.0,
            height: 24.0,
          ),
          title: Text(
            'Home',
          ),
      ),
      new BottomNavigationBarItem(
          icon: Image.asset(
            "assets/shopping-bagg.png",
            width: 24.0,
            height: 24.0,
          ),
          title: Text(
            'Mall',
          )),
      new BottomNavigationBarItem(
          icon: Image.asset(
            "assets/qr-code.png",
            width: 24.0,
            height: 24.0,
          ),
          title: Text(
            'Scan',
          )),
      new BottomNavigationBarItem(

          icon: Image.asset(
            "assets/bank.png",
            width: 24.0,
            height: 24.0,
          ),
          title: Text(
            'Bank',
          )),



      new BottomNavigationBarItem(
          icon: Image.asset(
            "assets/delivery.png",
            width: 24.0,
            height: 24.0,
          ),
          title: Text(
            'Inbox',
          )),


    ]);
      }

我要单击底部工具栏上的各个小部件，它应该将我导航到下一个页面，该页面是我为底部导航视图的每个菜单项分别创建的。非常感谢

Answer 1

在您的build()方法中，您可以添加此逻辑。

@override
Widget build(BuildContext context) {
  Widget widget = Container(); // default
  switch (_currentIndex) {
    case 0:
      widget = FirstPage();
      break;

    case 1:
      widget = SecondPage();
      break;

    case 2:
      widget = ThirdPage();
      break;
  }

  return Scaffold(
    body: widget,
    // ...
  );
}

更新：

我不确定您是如何做到的，在这里您可以看到一个正确执行此操作的小示例。

int _index = 0;

@override
Widget build(BuildContext context) {
  Widget child = Container();

  switch(_index) {
    case 0:
      child = FlutterLogo(colors: Colors.orange);
      break;

    case 1:
      child = FlutterLogo();
      break;
  }

  return Scaffold(
    appBar: AppBar(),
    bottomNavigationBar: _bottomTab(),
    body: SizedBox.expand(child: child),
  );
}

Widget _bottomTab() {
  return BottomNavigationBar(
    currentIndex: _index,
    onTap: (int index) => setState(() => _index = index),
    backgroundColor: Colors.deepPurple,
    items: [
      BottomNavigationBarItem(icon: Icon(Icons.looks_one), title: Text("1")),
      BottomNavigationBarItem(icon: Icon(Icons.looks_two), title: Text("2")),
    ],
  );
}

Answer 2

希望这会有所帮助。

int _selectedIndex = 0;
static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const _pages = <Widget>[
  Home(),//this is a stateful widget on a separate file 
  Business(),//this is a stateful widget on a separate file 
  School(),//this is a stateful widget on a separate file 

];

void _onItemTapped(int index) {
  setState(() {
    _selectedIndex = index;
  });
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('BottomNavigationBar Sample'),
    ),
    body: Center(
      child: _pages.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,
    ),
  );
}

如何在Flutter中为BottomNavigationBar菜单提供onPress函数？

2 个答案: