0

我有BottomNavigationBar4 个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',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.article_outlined),
          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(),
  );
 }
}
4

1 回答 1

0

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

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

于 2021-03-19T22:19:12.980 回答