单个类颤振多页

Question

是否有办法让底部导航栏的第一项多页?我尝试在第一个项目类上创建多个小部件，并调用按钮上的小部件onPressed，但底部导航栏消失了，

Answer 1

我不确定你到底想要实现什么，但如果它适合你，你可以尝试一下。

class TabsScreen extends StatefulWidget {
static const routeName = 'tab-screen';
@override
_TabsScreenState createState() => _TabsScreenState();
}
class _TabsScreenState extends State<TabsScreen> {
int selectedIndex = 0;
List<Map> tabPages = [
{
'page': FirstScreen(),
},
{
'page': SecondScreen(),
},
{
'page': ThirdScreen(),
}
];
void _selectPage(int index) {
setState(() {
selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: tabPages[selectedIndex]['page'],
bottomNavigationBar: BottomNavigationBar(
selectedItemColor: Colors.orange,
unselectedItemColor: Colors.grey,
currentIndex: selectedIndex,
onTap: _selectPage,
backgroundColor: Colors.grey[300],
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
size: 30,
),
label: 'FirstScreen'),
BottomNavigationBarItem(
icon: Icon(
Icons.restaurant,
size: 30,
),
label: 'SecondScreen'),
BottomNavigationBarItem(
icon: Icon(
Icons.settings,
size: 30,
),
label: 'ThirdScreen'),
],
),
);
}
}