Flutter路由

在Flutter中，路由管理主要有两个类：Route（一般用子类MaterialPageRoute）和Navigator

 Navigator

Navigator：管理所有的Route的Widget，通过一个Stack来进行管理的

• 官方的说法也很清晰：A widget that manages a set of child widgets with a stack discipline.

那么我们开发中需要手动去创建一个Navigator吗？

• 并不需要，我们开发中使用的MaterialApp、CupertinoApp、WidgetsApp它们默认是有插入Navigator的

• 所以，我们在需要的时候，只需要直接使用即可

• import 'package:flutter/material.dart';
  
  void main() {
    runApp(MyApp());
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: HomePage(),
      );
    }
  }
  
  class HomePage extends StatefulWidget {
    @override
    State<HomePage> createState() => _HomePageState();
  }
  
  class _HomePageState extends State<HomePage> {
    String _message='';
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Home Page'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(_message),
            Center(
              child: ElevatedButton(
                onPressed: () {
                  _jumpToDetail(context);
                },
                child: Text('Go to Second Page'),
              ),
            ),
          ],
        ),
      );
    }
    void _jumpToDetail(BuildContext context) {
      // 1.普通的跳转方式
      // 传递参数: 通过构造器直接传递即可
      Future result = Navigator.of(context).push(MaterialPageRoute(
          builder: (ctx) {
            return SecondPage("我是第一页传过来的数据");
          }
      ));
  
      // 2.获取结果
      result.then((res) {
        setState(() {
          _message = res;
        });
      });
    }
  }
  
  class SecondPage extends StatelessWidget {
  
    String s;
    SecondPage(this.s);
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Second Page+$s'),
          leading: IconButton(//自定义一个箭头按键，返回一个空
            onPressed: (){
              Navigator.of(context).pop("");
            },
            icon: Icon(Icons.arrow_back),
          ),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              //返回代码
              Navigator.of(context).pop("我是从第二页过来的数据");
            },
            child: Text('Go Back'),
          ),
        ),
      );
    }
  }

  通过命名路由routes

• main.dart：

• import 'package:flutter/material.dart';  
  import 'home_page.dart';  
  import 'second_page.dart';  
    
  void main() {  
    runApp(MyApp());  
  }  
    
  class MyApp extends StatelessWidget {  
    @override  
    Widget build(BuildContext context) {  
      return MaterialApp(  
        initialRoute: '/',  
        routes: {  
          '/': (context) => HomePage(),  
          '/second': (context) => SecondPage(),  
        },  
      );  
    }  
  }

  home_page.dart

• import 'package:flutter/material.dart';
  class HomePage extends StatelessWidget {
    var receivedData;
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Home Page'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              receivedData = await Navigator.pushNamed(context, '/second', arguments: "从第一页传过来");
              if (receivedData != null) {
                // 处理接收到的数据
                print('接收到的数据：$receivedData');
              }
            },
            child: Text('Go to Second Page'),
          ),
        ),
      );
    }
  }

  second_page.dart

• import 'package:flutter/material.dart';
  class SecondPage extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      //接收参数
      String receivedData = ModalRoute.of(context)?.settings.arguments as String;
      return Scaffold(
        appBar: AppBar(
          title: Text('Second Page'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(receivedData),
            Center(
              child: ElevatedButton(
                onPressed: () {
                  Navigator.pop(context ,"第二页面传来的数据");
                },
                child: Text('Go Back'),
              ),
            ),
          ],
        ),
      );
    }
  }