按下底部导航栏中的项目跳转到所需的屏幕

Question

我正在用flutter编写代码，底部导航栏的屏幕看起来像这样。

我想要的是，每当我从底部导航栏中按下主页按钮时，它都应该跳转到主屏幕，对于其他屏幕，例如单击我想移动到护理人员屏幕的护理人员图标等其他屏幕也是如此。我无法通过使用 BottomNaviagtionBar 来解决这个问题。请帮帮我。

包含我的底部导航栏的主屏幕代码：

import 'package:epicare/HistoryScreen.dart';
import 'package:epicare/ProfileScreen.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_switch/flutter_switch.dart';
import 'package:charts_flutter/flutter.dart' as charts;
import 'CaregiverScreen.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
@override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(),
      drawer: new Drawer(),
body: Column(),
bottomNavigationBar: Container(
        height: 70,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
              topRight: Radius.circular(20), topLeft: Radius.circular(20)),
          boxShadow: [
            BoxShadow(color: Colors.black38, spreadRadius: 0, blurRadius: 10),
          ],
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.only(
            topLeft: Radius.circular(20.0),
            topRight: Radius.circular(20.0),
          ),

          child: BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            backgroundColor: Colors.white,
            unselectedFontSize: 10,
            selectedFontSize: 10,
            selectedLabelStyle: optionStyle,
            currentIndex: _currentIndex,
            selectedItemColor: const Color(0xffd4d411),
            unselectedItemColor: const Color(0xffd4d411),
            onTap: onTabTapped,
            items: <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                icon: ImageIcon(
                  AssetImage('assets/images/home.png'),
                  color: const Color(0xffd4d411),
                ),
                title: new Text(
                  'Home',
                  style: TextStyle(
                    fontFamily: 'Montserrat',
                    fontSize: 10,
                    color: Colors.black,
                  ),
                ),
              ),
              BottomNavigationBarItem(
                icon: ImageIcon(
                  AssetImage(
                    'assets/images/caregiver.png',
                  ),
                  color: const Color(0xffd4d411),
                ),
                title: new Text(
                  'Caregiver',
                  style: TextStyle(
                    fontFamily: 'Montserrat',
                    fontSize: 10,
                    color: Colors.black,
                  ),
                ),
              ),
              BottomNavigationBarItem(
                icon: ImageIcon(
                  AssetImage('assets/images/history.png'),
                  color: const Color(0xffd4d411),
                ),
                title: Text(
                  'History',
                  style: TextStyle(
                    fontFamily: 'Montserrat',
                    fontSize: 10,
                    color: Colors.black,
                  ),
                ),
              ),
              BottomNavigationBarItem(
                icon: ImageIcon(
                  AssetImage('assets/images/profile.png'),
                  color: const Color(0xffd4d411),
                ),
                title: Text(
                  'Profile',
                  style: TextStyle(
                    fontFamily: 'Montserrat',
                    fontSize: 10,
                    color: Colors.black,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}

P.S：我还在学习 Flutter 提前谢谢！

Answer 1

尝试这样做：

在你的状态类中，把它放在开头：

int _currentIndex = 0;

在您开始构建时：

Widget build(BuildContext context) {

final _widgetOptions = [
  Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Stack( 
    children: [ Container( padding: EdgeInsets.symmetric(vertical: 22, 
    horizontal: 47),
  CaregiverScreen(),
  HistoryScreen(),
  ProfileScreen()
];

这应该是你的身体：

body: _widgetOptions.elementAt(_currentIndex),