Flutter之实现页面跳转功能_flutter 判断当前页面从那个也谬安跳转来的

Flutter之实现页面跳转功能

在Flutter中，如何实现页面的跳转？

第一种方式：命名路由的方法

主要是两个步骤：

• 注册路由表。
  • routes: {
    “/”: (context) => PageOne(),
    “/pageTwo”: (context) => PageTwo(),
    },
• 使用，两种方式，主要这个context是哪个context
  • Navigator.pushNamed(context, “/pageTwo”);
  • Navigator.of(context).pushNamed(’/b’);

import 'package:flutter/material.dart';

void main() => runApp(new Main());

class Main extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "页面一",
      ///注册路由表
      routes: {
        /// '/'是特殊地址，第一个页面
        "/": (context) => PageOne(),
        "/pageTwo": (context) => PageTwo(),
      },
    );
  }
}

class PageOne extends StatelessWidget {
  ///此处context为MaterialApp下的context
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: Text("第一个页面"),),
      body: RaisedButton(onPressed: () async {
        ///获取第二个页面返回的数据 相当于Activity 的onActivityResult
        var pushNamed = await Navigator.pushNamed(context, "/pageTwo");
        debugPrint(pushNamed);
      }, child: Text("点我跳转"),),
    );
  }
}

class PageTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(title: Text("第二个页面"),),
        body: RaisedButton(onPressed: () {
          //路由pop弹出，结束页面
          Navigator.pop(context, "结束返回");
        }, child: Text("我是第二个页面"),)

    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

第二种方式：哪里使用哪里跳

import 'package:flutter/material.dart';

void main() => runApp(new MainPage());

class MainPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "页面一",
      home: new PageOne(),
    );
  }
}

class PageOne extends StatelessWidget {
  ///此处context为MaterialApp下的context
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: Text("第一个页面"),),
      body: RaisedButton(onPressed: () {
        Navigator.push(context, MaterialPageRoute(builder: (_) {
          return PageTwo();
        }));
      }, child: Text("点我跳转"),),
    );
  }
}

class PageTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: Text("第二个页面"),),
      body: Text("我是第二个页面"),
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

Navigator

常用的方法及其作用，根据自己的需求选择性的使用