在单个类上颤动多页

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'),
        ],
      ),
    );
  }
}