Flutter 路由与导航

在移动端的开发中经常会有页面间的跳转flutter中可以通过路由来达到相同的效果

const MaterialApp({
    Key key,
    this.navigatorKey,
    this.home,
//这里
    this.routes = const <String, WidgetBuilder>{},
    this.initialRoute,
    this.onGenerateRoute,
    this.onUnknownRoute,
    this.navigatorObservers = const <NavigatorObserver>[],
    this.builder,
    this.title = '',
    this.onGenerateTitle,
    this.color,
    this.theme,
    this.darkTheme,
    this.themeMode = ThemeMode.system,
    this.locale,
    this.localizationsDelegates,
    this.localeListResolutionCallback,
    this.localeResolutionCallback,
    this.supportedLocales = const <Locale>[Locale('en', 'US')],
    this.debugShowMaterialGrid = false,
    this.showPerformanceOverlay = false,
    this.checkerboardRasterCacheImages = false,
    this.checkerboardOffscreenLayers = false,
    this.showSemanticsDebugger = false,
    this.debugShowCheckedModeBanner = true,
  })

我们可以看到在MaterialApp中有一个路由属性我们将创建好的界面写在路由里

class MyApp extends StatelessWidget {
  final CounterModel model;
  const MyApp({Key key, @required this.model}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    // At the top level of our app, we'll, create a ScopedModel Widget. This
    // will provide the CounterModel to all children in the app that request it
    // using a ScopedModelDescendant.
    return ScopedModel<CounterModel>(
      model: model,
      child: MaterialApp(
        title: 'Scoped Model Demo',
        home: CounterHome('Scoped Model Demo'),
        routes: <String, WidgetBuilder>
        {
          'Scoped_model':(BuildContext context)=>ScopedTestWidget(),
        },
      ),
    );
  }
}

然后我们写一个按钮

class CounterHome extends StatelessWidget {
  bool byName = false;
  final String title;
  CounterHome(this.title);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('You have pushed the button this many times:'),
            // Create a ScopedModelDescendant. This widget will get the
            // CounterModel from the nearest parent ScopedModel<CounterModel>.
            // It will hand that CounterModel to our builder method, and
            // rebuild any time the CounterModel changes (i.e. after we
            // `notifyListeners` in the Model).
            ScopedModelDescendant<CounterModel>(
              builder: (context, child, model) {
                return Text(
                  model.counter.toString(),
                  style: Theme.of(context).textTheme.display1,
                );
              },
            ),
        Container(
          child: RaisedButton(
            onPressed: () {
              //直接跳转
              //Navigator.push(context,MaterialPageRoute(builder:(context) => ScopedTestWidget()));
              //通过路由名字跳转
              Navigator.pushNamed(context, 'Scoped_model');
            },
            child: Text(title),
          ),
        ),

          ],
        ),

      ),
      // Use the ScopedModelDescendant again in order to use the increment
      // method from the CounterModel
      floatingActionButton: ScopedModelDescendant<CounterModel>(
        builder: (context, child, model) {
          return FloatingActionButton(
            onPressed: model.increment,
            tooltip: 'Increment',
            child: Icon(Icons.add),
          );
        },
      ),
    );
  }
}

此时我们可以直接跳转也可以通过我们注册的路由进行跳转