Flutter跳转 基本路由，命名路由，基本路由传值及命名路由传值的记录

1.基本路由

基本路由用法 首先准备一个基础布局：

import 'package:flutter/material.dart';

void main(List<String> args) {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("基本路由的使用"),
          ),
          body: Text("text")),
    );
  }
}

接下来在 body Text()替换为一个按钮，并重新编写一个跳转的布局

//按钮
RaisedButton(
  child: Text("基本路由"),
  onPressed: () {
    Navigator.of(context).push(MaterialPageRoute(
      builder: (context) {
      //返回 intentPage为跳转页面
        return intentPage();
      },
    ));
  },
),

import 'package:flutter/material.dart';
//新添加页面
class intentPage extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
       child: Scaffold(
         appBar: AppBar(
           title: Text("Intent页"),
         ),
         body: Center(
           child: Row(
             crossAxisAlignment: CrossAxisAlignment.center,
             mainAxisAlignment: MainAxisAlignment.center,
             children: <Widget>[
               Text("基本路由")
             ],
           )
         ),
       ),
    );
  }
}

点击按钮会发现 跳转到了新页面

2.基本路由传值 （可传递数据）

传递数据 首先将IntentPage.dart添加构造函数 如下 用来保存传过来的数据

String text;
intentPage({this.text = "默认值"});

将按钮中的Navigator修改为

Navigator.of(context).push(MaterialPageRoute(
  builder: (context) {
    return intentPage(text: "基本路由传值");
  },
)

import 'package:flutter/material.dart';

class intentPage extends StatelessWidget {
  
  String text;
  intentPage({this.text="默认值"});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text("Intent页"),
        ),
        body: Center(
          //使用方式
          child: Text(text),
        )
      ),
    );
  }
}

3.命名路由

首先在主页面的 MaterialApp 中添加语句 指定其一个名字

routes: {
 	"/intentPage":(context)=>intentPage(),
},

将Button中的 onPressed 修改为

RaisedButton(
  child: Text("命名路由"),
  onPressed: () {
    Navigator.pushNamed(context, "/intentPage");
  },
),

点击按钮时会发现 效果如同1里面的基本路由 效果是一样的

4.命名路由传值* （可传递数据）

稍复杂

首先先建立一个新文件名称为 routes.dart （名称可随意）
添加如下代码

final routes = {
	//如以下方法报错 检查是否没有导入包
  "/":(context)=>BottomNavigatorTest(),
  "/intentPage":(context,{arguments})=>intentPage(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中添加代码 如下

//导入刚刚建立的 routes.dart包
import 'package:study_demo/Routes/routes.dart';

initialRoute: “/”, 为声明打开时展示的页面为哪个 我这里是"/":(context)=>BottomNavigatorTest() BottomNavigatorTest可以是自己编写的其他页面

return MaterialApp(
   onGenerateRoute: onGenerateRoute, //引用routes.dart中的onGenerateRoute变量
   initialRoute: "/",//声明启动页 routes.dart中的命名引用
));

好了现在全都准备好了

跳转到的页面intentPage.dart中写成 介个样子 ：如下
然后介绍一下Chip组件 可显示成一个圆角背景组件

import 'package:flutter/material.dart';

class intentPage extends StatelessWidget {
  //添加的语句 用来保存传递过来的数据 类型为Map
  Map arguments;
  intentPage({this.arguments});
  
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(
          title: Text("Intent页"),
        ),
        body: Center(
            child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
          //如下使用方式来使用 Chip只是为了效果 取出arguments["text"]的数据
            Chip(label: Text(arguments!=null?arguments["text"]:"默认值",style: TextStyle(color: Colors.white),),elevation: 4,padding: EdgeInsets.all(10),backgroundColor: Colors.red,),
          ]
        )),
      ),
    );
  }
}

接下来修改 按钮事件
arguments: {“text”: “命名路由传值”}); 保存为 key，value值

RaisedButton(
  child: Text("命名路由传值"),
  onPressed: () {
  //如下
    Navigator.pushNamed(context, "/intentPage", arguments: {
      "text": "命名路由传值",
 	});
  },
),

结束

好的，以下就讲完了 我也会持续更新Flutter教程，发现更好玩的Component

文章结尾，别忘了给我一个大大的赞，本文章为原创文章，转载请标明出处

原创链接：https://blog.csdn.net/qq_42972848/article/details/107890959 【看看】