如何移动到不同的导航选项卡

Question

我是一个初学者，最近刚开始学习扑动，我把一个项目作为挑战，我在这一点上卡住了。我有一个单独的小部件文件为我的底部导航栏，并使用底部导航栏在我的主屏幕。那么我如何切换到不同的选项卡来显示不同的小部件呢?我的代码代码下面只显示的家庭标签小部件，这是在主屏幕主体。假设我想为每个选项卡显示不同的小部件，我如何才能实现这一点?

//底部导航栏小部件

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:foodbyte/widgets/PopularFoodsWidget.dart';
class BottomNavBarWidget extends StatefulWidget {
@override
_BottomNavBarWidgetState createState() => _BottomNavBarWidgetState();
}
class _BottomNavBarWidgetState extends State<BottomNavBarWidget> {
int _currentIndex = 0;

@override
Widget build(BuildContext context) {
return BottomNavigationBar(
currentIndex: _currentIndex,
selectedItemColor: Colors.lightBlue,
type: BottomNavigationBarType.fixed,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text(
'Home',
),
backgroundColor: Colors.blueAccent,
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
title: Text(
'Search',
),
backgroundColor: Colors.blueAccent,
),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_basket),
title: Text(
'Orders',
),
backgroundColor: Colors.blueAccent,
),
BottomNavigationBarItem(
icon: Icon(FontAwesomeIcons.user),
title: Text(
'Account',
),
backgroundColor: Colors.blueAccent,
),
],
onTap: (index) {
setState(() {
_currentIndex = index;
});
},
);
}
}

//主屏幕//这是我的主屏幕，我正在使用底部导航栏小部件

import 'package:flutter/material.dart';
import 'package:foodbyte/screens/categories.dart';
import 'package:foodbyte/widgets/top_menus.dart';
import 'package:foodbyte/widgets/BottomNavBarWidget.dart';

class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Color(0xFFFAFAFA),
elevation: 0,
title: Text(
"Welcome to my prototype app!",
style: TextStyle(
color: Color(0xFF3a3737),
fontSize: 16,
fontWeight: FontWeight.w500),
),
brightness: Brightness.light,
actions: <Widget>[
IconButton(
icon: Icon(
Icons.notifications_none,
color: Color(0xFF3a3737),
),
onPressed: () {
// Navigator.push(context, ScaleRoute(page: SignInPage()));
})
],
),
// appBar: buildSearchBar(context),
body: Padding(
padding: const EdgeInsets.fromLTRB(10.0, 0, 10.0, 0),
child: ListView(
children: <Widget>[
buildCategoryRow('Bottom Nav', context),
SizedBox(height: 10.0),
TopMenus(),
],
),
),
bottomNavigationBar: BottomNavBarWidget(),
);
}

buildCategoryRow(String category, BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"$category",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w800,
),
),
FlatButton(
child: Text(
"See all (9)",
style: TextStyle(
color: Theme.of(context).accentColor,
),
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) {
return Categories();
},
),
);
},
),
],
);
}
}

Answer 1

您可以根据自己的喜好创建屏幕或小部件列表。

List _widgets[Widget1,Widget2,Widget3];

因为你有_currentIndex，你可以用它来显示你想要的屏幕在支架体。

Scafold:...
body:_widgets[_currentIndex]

Answer 2

你的逻辑错了您使用的是主屏幕底部的导航栏，这不是一个好方法。您需要的是在底部导航栏类中使用Scaffold小部件，并将Indexed Stack小部件传递给其Scaffold的主体，并使用IndexStack的children参数并将屏幕名称粘贴到子部件中。并将底部导航栏小部件传递给这个scaffold的底部导航栏参数。