如何在 flutter 中使导航菜单可重复使用

Question

我有一个使用容器创建的导航菜单，在我的容器中有一个包含我所有图标的列。 当用户单击某些图标或右下角的登录按钮时，我想能够导航/路由到下一个屏幕。 我知道当我们移动到下一个屏幕时，左侧的菜单会消失，有没有办法让菜单栏在所有屏幕上保持不变。 我假设我需要专门为菜单栏创建一个单独的类/小部件，并在我路由到的每个页面上调用它。 我对 flutter 还是新手，所以我不确定是否有其他方法可以解决这个问题。 我还需要将顶部的行保留到所有页面上。

Widget build(BuildContext context) {
   return Container(
       width: 1280,
       height: 800,
       decoration: BoxDecoration(
         color: Color.fromRGBO(227, 227, 227, 1),
       ),
       child: Material(
         child: Stack(
             children: <Widget>[
               Positioned(
                   top: 0,
                   left: 80,
                   child: Container(
                       width: 1200,
                       height: 70,
                       decoration: BoxDecoration(
                         image: DecorationImage(
                             image: AssetImage('assets/images/Topbarbackground.png'),
                             fit: BoxFit.fitWidth
                         ),
                       )
                   )
               ), Positioned(
                   top: 652,
                   left: 0,
                   child: Container(
                       width: 1280,
                       height: 100,
                       decoration: BoxDecoration(
                         image: DecorationImage(
                             image: AssetImage(
                                 'assets/images/Rectangle112.png'),
                             fit: BoxFit.fitWidth
                         ),
                       )
                   )
               ), Positioned(
                   top: 0,
                   left: 0,
                   child: Container(
                       child: ListView(
                         children: [
                           SizedBox(
                             height: 50.0,
                             child: IconButton(
                               padding: EdgeInsets.all(0.0),
                               icon: Image.asset('assets/icons/Back.png'),
                               onPressed: () {},
                             ),
                           ),
                           SizedBox(
                             width: 0.0,
                             height: 150.0,
                             child: IconButton(
                               padding: EdgeInsets.all(0.0),
                               icon: Image.asset('assets/icons/tip_load.png'),
                               onPressed: () {},
                             ),
                           ),
                           SizedBox(
                             width: 0.0,
                             height: 50.0,
                             child: IconButton(
                               padding: EdgeInsets.all(0.0),
                               icon: Image.asset('assets/icons/tip_eject.png'),
                               onPressed: () {

                               },
                             ),
                           ),
                           SizedBox(
                             height: 125.0,
                             child: IconButton(
                               padding: EdgeInsets.all(0.0),
                               icon: Image.asset('assets/icons/Light.png'),
                               onPressed: () {},
                             ),
                           ),
                           IconButton(
                             padding: EdgeInsets.all(0.0),
                             icon: Image.asset('assets/icons/Utility.png'),
                             onPressed: () {},
                           ),
                           SizedBox(
                             height: 125.0,
                             child: IconButton(
                               padding: EdgeInsets.all(0.0),
                               icon: Image.asset('assets/icons/Help.png'),
                               onPressed: () {},
                             ),
                           ),
                           SizedBox(
                             height: 100.0,
                             child: IconButton(
                               padding: EdgeInsets.all(0.0),
                               icon: Image.asset('assets/icons/User.png'),
                               onPressed: () {},
                             ),
                           ),
                           IconButton(
                             padding: EdgeInsets.all(0.0),
                             icon: Image.asset('assets/icons/Power.png'),
                             onPressed: () {},
                           ),
                         ],
                       ),

Answer 1

有可能做到这一点。 您必须将侧边栏放在一个单独的 Widegt 中，然后制作一个小部件，以一行显示它。 然后，您将需要更改主文件的构建器，以便可以显示带有该行的小部件。 这不是最好的解释，所以我建议您通读这篇文章： https://medium.com/geekculture/persistent-widget-across-all-screens-using-flutter-navigator-45e6b2e57cf7

它展示了所有内容并为您提供了简短的教程。 我希望这会有所帮助。