在底部导航栏页面上缺少AppBar

Question

我有一个bottomNavigationBar当我点击Page2我应该登陆一个带有AppBar的页面在右上角有一个图标，但是当我点击它时，我只有一个空白的黑色页面.

这是code:

class Home extends StatefulWidget {
@override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
int _selectedIndex = 0;
static List<Widget> _widgetOptions = <Widget>[
Home_page(),
Page1(),
Page2(),
Page3(),
Page4(),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[900],
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.grey[900],
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
backgroundColor: Colors.grey[900],
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Esplora',
backgroundColor: Colors.grey[900],
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'Colori',
backgroundColor: Colors.grey[900],
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'Altro',
backgroundColor: Colors.grey[900],
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'Profilo',
backgroundColor: Colors.grey[900],
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}

这是Page2的代码:

class Page2 extends StatefulWidget {
@override
_Page2_HomeState createState() => _Page2_HomeState();
}
class _Page2_HomeState extends State<Page2_Home> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: [
navForm(),
],
title: Text("Page2"),
),
);
}
Widget navForm() {
return RaisedButton(
child: Icon(Icons.plus_one),
onPressed: () => navigateToForm(context),
);
}
}

不知道为什么AppBar不是吗，也许我没有很好地处理指标?

或AppBar这是我第一次处理BottomNavigationBar所以我认为错误出现在2

元素。

Answer 1

您还没有在Scaffold中添加body。这就是为什么每当你点击标签，你没有得到你想要的结果。你可以像这样在脚手架中添加主体:

body: _widgetOptions.elementAt(_selectedIndex),

构建的完整代码:

class _HomeState extends State<Home> {
int _selectedIndex = 0;
static List<Widget> _widgetOptions = <Widget>[
Container(),
Container(),
Page2(),
Container(),
Container(),
];
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[900],
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.grey[900],
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
backgroundColor: Colors.grey[900],
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Esplora',
backgroundColor: Colors.grey[900],
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'Colori',
backgroundColor: Colors.grey[900],
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'Altro',
backgroundColor: Colors.grey[900],
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'Profilo',
backgroundColor: Colors.grey[900],
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
body: _widgetOptions.elementAt(_selectedIndex),
);
}
}

Answer 2

像这样添加一个主体到scaffold主页:

@override
Widget build(BuildContext context) {
return Scaffold(
body: _widgetOption[_selectedIndex ],
backgroundColor: Colors.grey[900],
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.grey[900],