Flutter学习日记之使用路由进行页面切换

Posted 2021-05-20 Android_小黑

本文地址：https://blog.csdn.net/qq_40785165/article/details/116900126,转载需附上此地址

大家好，我是小黑，一个还没秃头的程序员~~~

你多学一样本事，就少说一句求人的话！

说实话，学的时候真痛苦，与原生android还是有区别的，但是毕竟是一种趋势，学到就是赚到，今天分享的是Flutter中的路由，开发中可以利用这个进行页面跳转。效果如图：

源码地址：https://gitee.com/fjjxxy/flutter-study.git

（一）先介绍基本的路由，没有对路由进行管理，直接引入页面组件，使用push/pop进行跳转/返回,对应demo中的首页跳转到第二个页面，RaisedButton是按钮，设置了点击事件以及内部组件，代码如下，

 RaisedButton(
                onPressed: () {
                  Navigator.of(context)
                      .push(MaterialPageRoute(builder: (context) {
                    return SecondPage(arguments: {
                      "id":1
                    },);
                  }));
                }, //这个属性不能为空，不然背景颜色无效
                child: Text(
                  "路由",
                  style: TextStyle(color: Colors.white),
                ),
                color: Colors.red,
              )

（二）基本路由跳转传值，通过定义构造函数进行传值，上面的代码中已进行传值，参数名为arguments，值为1；对应Demo中第二个页面的构造方法中的arguments可选参数，代码如下：

import 'package:flutter/material.dart';

class SecondPage extends StatefulWidget {
  final arguments;

  SecondPage({Key key, this.arguments}) : super(key: key);

  @override
  _SecondPageState createState() => _SecondPageState(arguments: this.arguments);
}

class _SecondPageState extends State<SecondPage> {
  Map arguments;

  _SecondPageState({this.arguments});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Content(arguments: arguments,),
      ),
      appBar: AppBar(
        title: Text("第二个页面"),
      ),
    );
  }
}

class Content extends StatelessWidget {
  Map arguments;

  Content({this.arguments});
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text("这是第二个页面:id=${arguments["id"]}"),
        RaisedButton(
          onPressed: () {
            Navigator.pushNamed(context, "/third");
          },
          child: Text("命名路由跳转第三个页面"),
        )
      ],
    );
  }
}

（三）命名路由，对所有的路由进行管理，使用Map中的key进行跳转，Demo中除了上例中的跳转之外，其他使用的都是命名路由，首先先定义一个路由文件，对路由的路径以及配置进行统一管理，代码如下：

Routes.dart

import 'package:flutter/material.dart';
import 'MainPage.dart';
import 'SecondPage.dart';
import 'ThirdPage.dart';
import 'ForthPage.dart';

//管理路由,main.dart直接导入这个路由管理就行
//arguments代表跳转时传的值
final routes = {
  '/': (context) => MainPage(), //配置根目录,默认首页
  '/second': (context, {arguments}) => SecondPage(arguments: arguments),
  '/third': (context) => ThirdPage(),
  '/forth': (context, {arguments}) => ForthPage(arguments: arguments),
};

var onGenerateRoute = (RouteSettings settings) {
  //统一处理
  final String name = settings.name;
  final Function pageContentBuilder = routes[name];
  if (pageContentBuilder != null) {
    if (settings.arguments != null) {
      final Route route = MaterialPageRoute(
          builder: (context) =>
              pageContentBuilder(context, arguments: settings.arguments));
      return route;
    } else {
      final Route route =
          MaterialPageRoute(builder: (context) => pageContentBuilder(context));
      return route;
    }
  }
};

接着在main.dart中设置厨师路由以及路由配置，代码如下：

import 'package:flutter/material.dart';

import 'Routes.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //设置完命名路由不能只是热加载，要重新运行,真的气！
      //路由页面不能用MaterialApp包裹，不然没有返回键
      //跳转的时候构造方法中没有接收参数就别传参数，会报错
      initialRoute: "/",//初始路由，首页
      onGenerateRoute: onGenerateRoute,//路由的配置
      theme: ThemeData(primarySwatch: Colors.red),
    );
  }
}

 跳转代码如下，Demo中为页面二跳转页面三：

 RaisedButton(
          onPressed: () {
            Navigator.pushNamed(context, "/third");
          },
          child: Text("命名路由跳转第三个页面"),
        )

 如果需要传值，可以按照上例基本路由中，给下个页面组件定义带参数的构造方法，并在跳转的方法中添加参数arguments，获取传值的方法与基本路由一致，使用$获取即可，如下代码所示：

 RaisedButton(
          onPressed: () {
            Navigator.pushNamed(context, "/third",arguments: {
              "id":1
            });
          },
          child: Text("命名路由跳转第三个页面"),
        )

（四） 返回的代码如下：

 RaisedButton(
            onPressed: () {
              Navigator.pop(context);
            },
            child: Text("普通返回"),
          )

 (五)讲完了普通的路由跳转，还有其他几个跳转Api介绍一下：

（1）替换路由：Navigator.pushReplacementNamed

适用场景：Page1->Page2->Page3->Page4,这个时候返回到Page2，而不是Page3，这个时候需要在Page3跳转到Page4的时候把Page3的路由替换，这样返回的时候就变成了返回到Page2，传值依然可以用定义带参构造方法来实现，代码如下：

RaisedButton(
          onPressed: () {
            Navigator.pushReplacementNamed(context, "/forth", arguments: {
              "content":
                  "替换路由会加载下一个页面并让下一个页面替换当前的路由,\\n即page1->page2->page3(这时候替换路由并跳转)->page4,这时候返回会回到page2,因为page3被替换了"
            });
          },
          child: Text("替换路由并跳转到第四个页面,返回到第二个页面"),
        )

（2）清除之前的路由直到你想要的旧页面：

1. Navigator.pushNamedAndRemoveUntil 适用于命名路由
2. Navigator.pushAndRemoveUntil 适用于基本路由

 适用场景：直接返回到某操作的开始页面或者App首页，这个Api可以在跳转中清除之前的路由，直到你设置的终点页面，代码如下：

  RaisedButton(
            onPressed: () {
              //这种方式用构造方法传值，适用于基本路由跳转
              // Navigator.pushAndRemoveUntil(context, MaterialPageRoute(builder: (context)=> MainPage()), (route) => false);
              //这种方式可以用arguments参数传值，适用于命名路由跳转
              //第三个参数为true->可以返回，false->无法返回
              Navigator.pushNamedAndRemoveUntil(context, "/", (route) => false);
            },
            child: Text("移除之前的路由并返回"),
          )

（六）注意事项 

注意事项：
1.设置完命名路由不要只是热加载，报错的时候可以重新运行试试,真的气！
2.路由页面不能用MaterialApp包裹，不然没有返回键
3.跳转的时候构造方法中没有接收参数就别传参数，会报错

到此为止，Flutter的路由跳转就介绍完毕了，还是有些坑的，需要多尝试多总结，源码地址，最后，希望喜欢我文章的朋友们可以帮忙点赞、收藏、评论，也可以关注一下，如果有问题可以在评论区提出，后面我会持续更新Flutter的学习记录，与大家分享，谢谢大家的支持与阅读!