Flutter之路由及页面跳转

1.路由跳转到页面
思路:
设计三个按钮 然后三个点击事件 利用
Navigator.of(context).push( MaterialPageRoute(builder: (context)=>page));
进行跳转新页面
2.页面折回到路由
在跳转的页面加入监听 收拾监听 利用

 leading:GestureDetector(
  onTap:(){
    Navigator.pop(context);
  },
  child: Icon(Icons.arrow_back),
) ,

进行折回

3.还有一种

AppBar中加入

   actions: [
        new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved),
      ]

进行跳转

完整代码

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:flutter_color_plugin/flutter_color_plugin.dart';
import 'package:fluter/flutter-01-statelessWidgets.dart';
import 'package:fluter/flutter-02-statefulWidgets.dart';
import 'package:fluter/flutter-03-layoutPage.dart';
import 'package:fluter/Demo4-更换组件.dart';
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title:"demo",
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
      home: RouteNavigator() ,
      routes: {
          'less':(BuildContext context) => MyWidgeTest(),
          'ful':(BuildContext context) => MyStatefulWidgetApp(),
          'layout':(BuildContext context) => MyLayoutWidgetApp(),
    },
    );
  }

}
class RouteNavigator extends StatefulWidget {
  @override
  _RouteNavigatorState createState() => new _RouteNavigatorState();
}

class _RouteNavigatorState extends State {
  final _saved = new Set();
  
  bool byName =false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("路由"),
          actions: [
            new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved),
          ]
      ),
      body: buildContainer(),
    );
  }

  void _pushSaved() {
    var take = generateWordPairs().take(10);
    for (var o in take) {
      _saved.add(o);
    }
    Navigator.of(context).push(
      new MaterialPageRoute(
        builder: (context) {
          final tiles = _saved.map((pair) {
            return new ListTile(
              title: new Text(
                pair.asPascalCase,
                style: TextStyle(fontSize: 20),
              ),
            );
          },
          );
          final divided = ListTile.divideTiles(
            context: context,
            tiles: tiles,
          ).toList();
          return new Scaffold(
            appBar: new AppBar(
              title: new Text('Saved Suggestions'),
            ),
            body: new ListView(
                children: divided),
          );
        },
      ),
    );
    
  }
  Container buildContainer() {
    return new Container(
    decoration: BoxDecoration(color: Colors.white),
    margin: EdgeInsets.only(top: 60),
    height: 300,
    width: 600,
    child: Column(
      children: [SwitchListTile(
          title: Text("${byName?"":"不"} 通过路由名字跳转"),
          value: byName,
          onChanged: (value){
        print(value);
        setState(() {
          byName=!byName;
        });
        return value;
      }),
        _item("Flutter之statelessWidget的基础组件",MyWidgeTest(title: '基础组建'),"less"),
        _item("Flutter之statefulWidget的基础组件",MyStatefulWidget1(title: '有状态组件'),"ful"),
        _item("Flutter之布局的相关组件", MyStatefulWidget(title: '布局组建'),"layout"),
        _item("Flutter之更换组件",SampleAppPage(),"of"),
      ],
    ),
  );
  }

    _item(String title, page, String  rountName) {
      return Container(
        width: 300,
        child: RaisedButton(
          onPressed: (){
          if(byName){
            Navigator.of(context).push( MaterialPageRoute(builder: (context)=>page));
//            Navigator.pushNamed(context, rountName);
          }
          },
            child: Text(title)),
      );
  }
}

注意事项:
1.可以在MaterialApp 中加入 路由

然后用命令

 Navigator.pushNamed(context, rountName);

进行跳转

2.跳转的页面 写有状态组件 要不返回的时候会黑屏