(共556篇)
全部分类

flutter命名路由及传参
[ Flutter ] 

命名路由/注册路由表

MeterialApprouters属性允许同时注册多个路由表,initialRoute属性用来指定初始化的路由(第一个页面)

routers的属性值是一个Map对象keyString类型,表示路由名字,value是一个返回widgetbuild函数

1
2
3
4
5
 Map<String, WidgetBuilder> routes = {
      '/': (context) => HomePage(),
      '/p1': (context) => P1(),
      '/p2': (context) => P2()
    };

Navigator.pushNamed()方法通过路由的名字来跳转到指定路由

 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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Map<String, WidgetBuilder> routes = {
      '/': (context) => HomePage(),
      '/p1': (context) => P1(),
      '/p2': (context) => P2()
    };
    return MaterialApp(
        title: 'home', 
        initialRoute: '/', 
        routes: routes
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Center(
            child: Column(
                  children: [
                    TextButton(
                        onPressed: () {
                          Navigator.of(context).pushNamed('/p1');
                        },
                        child: Text('click to p1 page')),
                    TextButton(
                        onPressed: () {
                          Navigator.of(context).pushNamed('/p2');
                        },
                        child: Text('click to p2 page')),
                  ],
        )),
      ),
    );
  }
}

class P1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            Text('p1 content'),
          ],
        ),
      ),
    );
  }
}

class P2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            Text('p2 content'),
          ],
        ),
      ),
    );
  }
}

通过pushNamed函数传递参数给新路由

Navigator.pushNamed(name,{Object? arguments})函数的第二个参数可以传递参数给路由 参考官方文档

新的路由中,同样可以通过ModelRoute.of(context).setting.arguments获取到参数

 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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Map<String, WidgetBuilder> routes = {
        '/': (context) => HomePage(), 
        '/p1': (context) => P1()
    };
    return MaterialApp(
      title: 'home',
      initialRoute: '/',
      routes: routes
    );
  }
}

class Person {
  final String name;
  final int age;
  Person({this.name, this.age});
}

class HomePage extends StatelessWidget {
  void nextPage(BuildContext context) {
    Navigator.of(context)
        .pushNamed('/p1', arguments: Person(name: 'loki', age: 18));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Center(
          child: TextButton(
              onPressed: () {
                nextPage(context);
              },
              child: Text('click to next page')),
        ),
      ),
    );
  }
}

class P1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 获取参数
    Person arg = ModalRoute.of(context).settings.arguments;

    print(arg.name);  // 'loki'
    print(arg.age);   // 18
    
    return Scaffold(  
      appBar: AppBar(
        title: Text('p1 page'),
      ),
      body: Center(
        child: Column(
          children: [
            Text('p1 content'),
          ],
        ),
      ),
    );
  }
}

通过构造函数接收参数

假设更习惯用构造函数的形式接收参数可以在routes中把arguments额参数转为构造函数的参数

 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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Map<String, WidgetBuilder> routes = {
        '/': (context) => HomePage(), 
        // 在里把pushNamed中的参数,转给P1的构造器函数
        '/p1': (context) => P1(args:ModalRoute.of(context).settings.arguments)
        
    };
    return MaterialApp(
      title: 'home',
      initialRoute: '/',
      routes: routes
    );
  }
}

class Person {
  final String name;
  final int age;
  Person({this.name, this.age});
}

class HomePage extends StatelessWidget {
  void nextPage(BuildContext context) {
    Navigator.of(context)
        .pushNamed('/p1', arguments: Person(name: 'loki', age: 18));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Center(
          child: TextButton(
              onPressed: () {
                nextPage(context);
              },
              child: Text('click to next page')),
        ),
      ),
    );
  }
}

class P1 extends StatelessWidget {

  final Person args;
  P1({Key key, this.args});

  @override
  Widget build(BuildContext context) {
    // 获取参数

    print(args.name);  // 'loki'
    print(args.age);   // 18

    return Scaffold(  
      appBar: AppBar(
        title: Text('p1 page'),
      ),
      body: Center(
        child: Column(
          children: [
            Text('p1 content'),
          ],
        ),
      ),
    );
  }
}