按下底部导航栏中的项目，跳至所需的屏幕 [英] Jumping to desired screens on pressing an item in Bottom Navigation Bar

问题描述

我正在快速编写代码，底部导航栏的屏幕看起来像这样.

I am writing a code in flutter and the screen with the bottom navigation bar looks like this.

我想要的是，每当我按下底部导航栏中的主页按钮时，它都应该跳到主屏幕，对于其他屏幕，例如单击我要移至照顾者屏幕"的照顾者图标，以此类推.我无法通过使用BottomNaviagtionBar来解决这个问题.请帮帮我.

What I want is that whenever I press the home button from the bottom navigation bar it should jump to the home screen, similarly for other screens like clicking the caregiver icon I want to move to Caregiver Screen and so on for others. I cannot figure this out by using BottomNaviagtionBar. Please help me out.

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

Code for Home Screen that contains my bottom navigation bar:

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:我还在学习颤抖预先谢谢你！

P.S: I am still learning flutter Thank you in advance!

推荐答案

尝试执行以下操作:

在您的州立课程中，将其放在开头:

in your state class, put this at the beginning:

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),

这篇关于按下底部导航栏中的项目，跳至所需的屏幕的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！