Flutter 基础（五）Route 路由以及页面间传值

最新推荐文章于 2024-09-25 20:26:11 发布

AboBack

最新推荐文章于 2024-09-25 20:26:11 发布

阅读量3.3k

点赞数

分类专栏： Flutter 基础文章标签： Flutter Route 传值 Navigator 路由

本文链接：https://blog.csdn.net/jhbxyz/article/details/100829372

版权

本文介绍了Flutter中的Route路由机制，包括新建路由、注册路由的方法，以及两种页面间传值的方式：新建路由传值和注册路由传值。详细讨论了如何通过MaterialPageRoute的settings参数和RouteSettings的arguments进行传值。

摘要由CSDN通过智能技术生成

Route 路由以及页面间传值

一种页面跳转机制
路由 Route 对应到 Android 就是 Intent
Flutter 路由分两种：新建路由、注册路由
需要Route表示 Navigator进行管理
跳转页面 Navigator.push()
返回页面 Navigator.pop()
传值

1.新建路由

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
   
  @override
  Widget build(BuildContext context) {
   
    return MaterialApp(
      title: 'Route Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Route Demo'),
        ),
        body: FirstPage(),
      ),
    );
  }
}

class FirstPage extends StatelessWidget {
   
  @override
  Widget build(BuildContext context) {
   
    return Container(
      width: double.infinity,
      color: Colors.redAccent[100],
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            '当前页面 FirstPage',
            style: TextStyle(
              fontSize: 32,
              color: Colors.white,
            ),
          ),
          RaisedButton(
            color: Colors.blue,
            child: Text(
              '去下一个页面',
              style: TextStyle(
                color: Colors.white,
              ),
            ),
            onPressed: () {
   
              //新建路由跳转页面
              Navigator.push(context, MaterialPageRoute(builder: (context) {
   
                return SecondPage();
              }));
            },
          ),
        ],
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
   
  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      body: Container(
        width: double.infinity,
        color: Colors.greenAccent[100],
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: