Flutter navigation for part of screen

问题

How can I push a widget in the frame of another widget? For example I have a Column with 2 Containers where every Container takes half of the screen. I'd like to make a navigation e.g. only in the bottom container. The same logic as in iOS when the container view has it's own UINavigationController.

As I understood MaterialPageRoute can push widgets only to fullscreen and there aren't any other Route classes, except abstract ones. Maybe I should make my own subclass of ModalRoute/TransitionRoute?

回答1:

You can use the Navigator widget to provide any number of individual navigators in your app. Each Navigator will maintain it's own navigation stack. For example, if you wanted to split your app vertically with each half having it's own navigation stack:

Column(
  children: <Widget>[
    Navigator(...),
    Navigator(...)
  ]
)

If you do this, you should consider how you want to handle the Android back button (now that you technically have 3 navigators in your app). By default, it will only listen to your root navigator so you will have to provide a WillPopScope widget somewhere in your widget hierarchy to capture back button events and pop from the appropriate navigator.

回答2:

One possible solution would be to create a new MaterialApp on that portion of the screen and handle everything from there like a regular app (just with different screen size) like so:

Column(
        children: <Widget>[
          Container(
            height: constraints.maxHeight * 0.5,
            width: constraints.maxWidth,
          ),
          Container(
              height: constraints.maxHeight * 0.5,
              width: constraints.maxWidth,
              child: MaterialApp(
                  debugShowCheckedModeBanner: false,
                  theme: ThemeData(
                    primaryColor: Color.fromRGBO(86, 86, 86, 1.00),
                  ),
                  initialRoute: '/W1',
                  routes: {
                    '/W1': (context) => WidgetOne(),
                    '/W2': (context) => WidgetTwo(),
                  })),
        ],
      ),

Then handle the routing from withing the widgets like so:

class WidgetOne extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return GestureDetector(
    onTap: () {
      Navigator.pushNamed(context, '/W2');
    },
    child: Container(color: Colors.green));
    }
  }
}

class WidgetTwo extends StatelessWidget {
@override
Widget build(BuildContext context) {
  return GestureDetector(
    onTap: () {
      Navigator.pushNamed(context, '/W1');
    },
    child: Container(color: Colors.pink));
    }
  }
}

Result: https://i.stack.imgur.com/qyJ5N.gif

来源：https://stackoverflow.com/questions/50986350/flutter-navigation-for-part-of-screen

标签

Flutter

flutter-layout