(共556篇)
全部分类

flutter页面跳转及传参
[ Flutter ] 

简单的页面跳转

 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
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'home',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  void nextPage(BuildContext context) {}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Center(
          child: TextButton(
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(
                  builder: (context) {
                    return Scaffold(
                      appBar: AppBar(
                        title: Text('new page'),
                      ),
                      body: Center(
                        child: Text('new page content'),
                      ),
                    );
                  },
                ));
              },
              child: Text('click to next page')),
        ),
      ),
    );
  }
}

按钮中的事件也可以单独拿出来

 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
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'home',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  void nextPage(BuildContext context) {
    Navigator.of(context).push(MaterialPageRoute(
      builder: (context) {
        return Scaffold(
          appBar: AppBar(
            title: Text('new page'),
          ),
          body: Center(
            child: Text('new page content'),
          ),
        );
      },
    ));
  }

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

方式一: 通过构造函数传参1:字符串/数字/布尔值

 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
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'home',
      home: HomePage(),
    );
  }
}


class HomePage extends StatelessWidget {
  void nextPage(BuildContext context) {
    Navigator.of(context).push(MaterialPageRoute(
      builder: (context) {
        // return P1(arg:'lily'); // string类型参数
        // return P1(arg:1);// 数字类型参数
        return P1(arg: true); // 布尔类型参数
      },
    ));
  }

  @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  arg;  // 这里没有限制arg的类型,所以可以接受任何类型的参数

  P1({Key key, this.arg});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('p1 page'),
      ),
      body: Center(
        child: Column(
          children: [
            Text('$arg'), 
          ],
        ),
      ),
    );
  }
}

方式一: 通过构造函数传参2:实例

 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
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'home',
      home: HomePage(),
    );
  }
}

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

class HomePage extends StatelessWidget {
  void nextPage(BuildContext context) {
    Navigator.of(context).push(MaterialPageRoute(
      builder: (context) {
        return P1(arg: Person(name: 'lily', 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 arg;  // 这里限制了arg的类型

  P1({Key key, this.arg});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('p1 page'),
      ),
      body: Center(
        child: Column(
          children: [
            Text(arg.name),  
          ],
        ),
      ),
    );
  }
}

第二种方式: MaterialPageRoute的setting属性传参

 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
79
80
81
82
83
84
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'home',
      home: HomePage(),
    );
  }
}

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

class HomePage extends StatelessWidget {
  void nextPage(BuildContext context) {
    Navigator.of(context).push(MaterialPageRoute(
        builder: (context) {
          return P1(arg: Person(name: 'lily', age: 18));
        },
        // 通过MaterialPageRoute的setting属性传递参数
        settings:
            RouteSettings(name: 'homepage', arguments: {'name': 'loki','age':30})));
  }

  @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 arg; // 这里限制了arg的类型

  P1({Key key, this.arg});

  @override
  Widget build(BuildContext context) {

    // 通过ModalRoute属性获取参数,以下是获取到的各种属性信息:
    
    print(ModalRoute.of(context).settings);
    // RouteSetting('homepage', {name: 'loki'})

    print(ModalRoute.of(context).settings.arguments);
    // {name: 'loki'}

    Map settings = ModalRoute.of(context).settings.arguments;
    print(settings['name']); // 'loki'
    print(settings['age']); // 30'

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