Flutter BottomNavigationBar 调用导航器推送一个导航器项目

问题描述

我有一个包含 4 个 BottomNavigationBar 项目的 BottomNavigaton 并且想要 3 个项目为正文呈现不同的内容，这已经很好了。我想要第一个项目打开相机并链接到一个全新的页面。我该怎么做？

我已经尝试过的内容附在下面。

我收到类似的错误

setState() 或 markNeedsBuild() 在构建过程中被调用。无法将此 Overlay 小部件标记为需要构建，因为框架已在构建小部件的过程中。

所以我觉得我太早调用了CameraScreen的build方法，但是不知道怎么避免。

class TabScreen extends StatefulWidget {
      int index;
    
      TabScreen(this.index);
      @override
      _TabScreenState createState() => _TabScreenState(index);
   }

class _TabScreenState extends State<TabScreen> {
  int _selectedPageIndex;

  _TabScreenState([this._selectedPageIndex = 1]);

  final List<Map<String,Object>> _pages = [
    {
      // index = 0 should push new Screen without appbar & bottom nav bar and open camera
      'page': null,'title': 'Cam',},{
      'page': ListScreen(),'title': 'List',{
      'page': TransportScreen(),'title': 'Transport',{
      'page': ExportScreen(),'title': 'Export',}
  ]; 

void _selectPage(int index,BuildContext ctx) {
      setState(() {
          _selectedPageIndex = index;
      });
      // this part does not work
      // if (_selectedPageIndex == 0){
      //   Navigator.of(ctx).pushNamed(CameraScreen.routeName);
      // }
  }

@override
  Widget build(BuildContext context) {

    final bottomBar = BottomNavigationBar(
      currentIndex: _selectedPageIndex,onTap: (i) => _selectPage(i,context),items: const <BottomNavigationBarItem>[
        BottomNavigationBarItem(
          icon: Icon(Icons.camera_alt_outlined),label: 'Cam',// backgroundColor: Colors.red,),BottomNavigationBarItem(
          icon: Icon(Icons.article_outlined),label: 'List',label: 'Transport',BottomNavigationBarItem(
          icon: Icon(Icons.arrow_forward),label: 'Export',],);    

    return Scaffold(
      appBar: AppBar(
        title: Text(_pages[_selectedPageIndex]['title']),body: _pages[_selectedPageIndex]['page'],bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),notchMargin: 4,clipBehavior: Clip.antiAlias,child: bottomBar,floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,floatingActionButton: _buildActionButton(),);
 }
}

解决方法

好吧，我自己解决了。上述使用 Navigator.of(ctx).pushNamed(CameraScreen.routeName); 的解决方案 确实有效。

我的问题出在 CameraScreen 文件中，它在其构建功能中使用了一些小部件，并且变得太大而无法适应屏幕。