Flutter中的路由实现方式

最新推荐文章于 2024-06-16 16:21:32 发布
最新推荐文章于 2024-06-16 16:21:32 发布
阅读量7k 收藏
点赞数
分类专栏： Flutter 文章标签： flutter路由 flutter带参数返回 Hero
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ytfunnysite/article/details/103505905
版权

文章目录

导航到一个新页面和返回

Navigator.push方法
跳转后样子
自带返回

import 'package:flutter/material.dart';

void main(){
  runApp(MaterialApp(
    title: '基本路由',
    home: FirstRoute(),
  ));
}

class FirstRoute extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('First Route'),
      ),
      body: Center(
        child: RaisedButton(
            child: Text('Open route'),
            onPressed: (){
//              Navigator.push跳转的页面自带返回键
              Navigator.push(context, MaterialPageRoute(builder: (context) => SecondRoute()));
            }
        ),
      ),
    );
  }
}

class SecondRoute extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Route'),
      ),
      body: Center(
        child: RaisedButton(
            child: Text('Go back'),
            onPressed: (){
              Navigator.pop(context);
            }),
      ),
    );
  }
}

导航到一个新页面带参数返回

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: '带参数返回路由',
    home: HomeScreen(),
  ));
}
//第一屏页面
class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Returning with data'),
      ),
      body: Center(
        child: SelectionButton(),
      ),
    );
  }
}

class SelectionButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return RaisedButton(
      onPressed: () {
        _navigateAndDisplaySelection(context);
      },
      child: Text('Pick an option, any option!'),
    );
  }

  _navigateAndDisplaySelection(BuildContext context) async {
    //用result接受第二屏的返回值
    final result = await Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => SelectionScreen()),
    );
    //级联操作符 (..) 可以在同一个对象上 连续调用多个函数以及访问成员变量。 使用级联操作符可以避免创建 临时变量
    Scaffold.of(context)
    ..removeCurrentSnackBar()
    ..showSnackBar(SnackBar(content: Text("$result"),));
  }
}

//第二屏页面
class SelectionScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Pick an option'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: RaisedButton(
                onPressed: () {
                  // 在这里返回 "Yep"
                  Navigator.pop(context,'Yep!');
                },
                child: Text('Yep'),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: RaisedButton(
                onPressed: () {
                  // 在这里返回 "Noep"
                  Navigator.pop(context,'Noep!');
                }, child: Text('Noep'),),
            ),
          ],
        ),
      ),
    );
  }
}

通过构造函数携带参数跳转

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';

void main() {
  runApp(MaterialApp(
    title: '携参数跳转',
    home:TodosScreen(todos: List.generate(20, (i)=> Todo(
      'Todo $i',
      'A description of what needs to be done for Todo $i'
    ))),
  ));
}

// 数据类（要携带的数据）
class Todo {
  final String title;
  final String description;

  Todo(this.title, this.description);

}

class TodosScreen extends StatelessWidget {
  final List<Todo> todos;

  TodosScreen({Key key, @required this.todos}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Todos'),
      ),
      body: ListView.builder(
          itemCount: todos.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(todos[index].title),
              onTap: () {
                Navigator.push(context, MaterialPageRoute(
                  builder: (context) => DetailScreen(todo: todos[index]),));
              },
            );
          }),
    );
  }

}

//构造函数接受传递过来的参数
class DetailScreen extends StatelessWidget{
  final Todo todo;

  DetailScreen({Key key, @required this.todo}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text(todo.title),
      ),
      body: Padding(padding: EdgeInsets.all(16.0),child: Text(todo.description),),
    );
  }
}

通过RoutSettings携带参数跳转

import 'package:flutter/material.dart';
import 'package:flutter/foundation.dart';

void main() {
  runApp(MaterialApp(
    title: 'RouteSettings携参数跳转',
    home: TodosScreen(
        todos: List.generate(
            20,
            (i) => Todo('Todo $i',
                'A description of what needs to be done for Todo $i'))),
  ));
}

// 数据类（要携带的数据）
class Todo {
  final String title;
  final String description;

  Todo(this.title, this.description);
}

class TodosScreen extends StatelessWidget {
  final List<Todo> todos;

  TodosScreen({Key key, @required this.todos}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Todos'),
      ),
      body: ListView.builder(
          itemCount: todos.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(todos[index].title),
              onTap: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => DetailScreen(),
                      //通过RouteSettings传递参数
                      settings: RouteSettings(
                        arguments: todos[index]
                      )
                    ));
              },
            );
          }),
    );
  }
}

//构造函数接受传递过来的参数
class DetailScreen extends StatelessWidget {

//  DetailScreen({Key key, @required this.todo}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    //通过ModalRoute取参数
    final Todo todo = ModalRoute.of(context).settings.arguments;

    return Scaffold(
      appBar: AppBar(
        title: Text(todo.title),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Text(todo.description),
      ),
    );
  }
}

命名路由

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: '命名路由',
    //当使用 initialRoute 时，需要确保你没有同时定义 home 属性
    initialRoute: '/',
    routes: {
      // 当我们跳转到“/”时，构建 FirstScreen
      '/':(context) => FirstScreen(),
      // 当我们跳转到“/second”时，构建 SecondScreen
      '/second':(context) =>SecondScreen(),
    },
  ));
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
//          点击时跳转到第二个界面
            Navigator.pushNamed(context, '/second');
          },
          child: Text('Launch screen'),),
      ),
    );
  }

}
class SecondScreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: RaisedButton(onPressed: (){
          // 点击时跳转回第一个界面！
          Navigator.pop(context);
        },child: Text('Go back!'),),
      ),
    );
  }
  
}

给特定路由传参

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //通过 onGenerateRoute() 函数提取参数，然后把参数传递给组件,和routes是两种方式
      onGenerateRoute: (settings) {
        if (settings.name == PassArgumentsScreen.routeName) {
          final ScreenArguments arguments = settings.arguments;

          return MaterialPageRoute(builder: (context) {
            return PassArgumentsScreen(
              title: arguments.title,
              message: arguments.message,
            );
          });
        }
        return null;
      },
      title: '给特定路由传参',
      home: HomeScreen(),
      routes: {
        //把组件注册到路由表中
        ExtractArgumentsScreen.routeName: (context) => ExtractArgumentsScreen(),
      },
    );
  }
}

class ScreenArguments {
  final String title;
  final String message;

  ScreenArguments(this.title, this.message);
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                Navigator.pushNamed(context, ExtractArgumentsScreen.routeName,
                    arguments: ScreenArguments(
                      '秦时明月',
                      '沧海横流',
                    ));
              },
              child: Text('Navigate to screen that extracts arguments'),
            ),
            RaisedButton(
              onPressed: () {
                Navigator.pushNamed(context, PassArgumentsScreen.routeName,
                    arguments: ScreenArguments(
                        '九歌·少司命',
                        '悲莫悲兮生别离，乐莫乐兮新相知'
                    )
                );
              },
              child: Text('Navigate to a named that accepts arguments'),
            ),
          ],
        ),
      ),
    );
  }
}

//ModalRoute接受参数
class ExtractArgumentsScreen extends StatelessWidget {
  static const routeName = '/extractArguments';

  @override
  Widget build(BuildContext context) {
//    ModalRoute.of() 方法返回的是当前路由及其携带的参数
    final ScreenArguments arguments = ModalRoute.of(context).settings.arguments;
    return Scaffold(
      appBar: AppBar(
        title: Text(arguments.title),
      ),
      body: Center(
        child: Text(arguments.message),
      ),
    );
  }
}

//构造方法接受参数
class PassArgumentsScreen extends StatelessWidget {
  static const routeName = '/passArguments';

  final String title;
  final String message;

  PassArgumentsScreen({Key key, @required this.title, @required this.message})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text(message),
      ),
    );
  }
}

转场动画路由Hero

import 'package:flutter/material.dart';

void main() => runApp(HeroAPP());

class HeroAPP extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'Transition Demo',
      home: MainScreen(),
    );
  }

}
class MainScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Main Screen'),
      ),
      body: GestureDetector(
          onTap: () {
            Navigator.push(context, MaterialPageRoute(builder: (_) {
              return DetailScreen();
            }));
          },
          child: Hero(
            tag: 'imageHero',
            child: Image.network('https://picsum.photos/250?image=9'),
          )),
    );
  }
}

class DetailScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Center(
          child: Hero(
            tag: 'imageHero',
            child: Image.network('https://picsum.photos/250?image=9'),
          ),
        ),
      ),
    );
  }
}
杨天福911
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Flutter中的路由
wangzunkuan的博客
10-23 2067
1.概述 Flutter支持所有的路由场景，包括push页面、pop页面，以及页面间的参数传递等。flutter里面的路由可以分为如下两种。 静态路由：直接注册，不能传递参数。 动态路由：要自己构造实例，可以传递参数。 静态路由 动态路由 ...
Flutter 局部路由实现详解
08-25
Flutter 局部路由实现详解是指在 Flutter 中实现局部路由的方法，通过 Navigator Widget 实现路由的跳转和管理。下面将详细介绍 Flutter 局部路由实现详解的知识点。 一、Navigator Widget Navigator Widget 是 ...
Flutter—路由
大模型训练
02-15 1199
路由（Route）在移动开发中通常指页面（Page），这跟 Web 开发中单页应用的 Route 概念意义是相同的，Route 在 Android中 通常指一个 Activity，在 iOS 中指一个 ViewController。所谓路由管理，就是管理页面之间如何跳转，通常也可被称为导航管理。Flutter 中的路由管理和原生开发类似，无论是 Android 还是 iOS，导航管理都会维护一个路由栈，路由入栈（push）操作对应打开一个新页面，路由出栈（pop）操作对应页面关闭操作，而路由管理主要是指如何
Flutter 异步编程：Future、async、await 深入解析
最新发布
u011464172的专栏
06-16 794
Flutter 异步编程是构建高性能、响应式应用的关键。通过使用Futureasync和await，我们可以轻松地处理耗时操作，并确保应用的流畅性和稳定性。希望本教程能帮助您更好地理解和运用 Flutter 异步编程。
Flutter路由使用
weixin_42514162的博客
11-24 177
Flutter的路由使用有两种方式，分别是新建路由和注册路由。 新建路由 代码如下： import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext context){ return MaterialApp( title: "Welcome
Flutter入门进阶之旅（十三）Flutter 路由
谢栋的专栏
02-20 2267
距离上一篇专栏已经过去好长时间了，小伙伴们都等急了吧，刚刚过了个年，笔者刚刚从吃喝睡的状态复苏回来，开始马不停蹄的进入到工作状态，题外话说的有点多，接下来我们开始进入我们本篇博文的主题Fluttter 路由。 在本篇博文更新之前就有好多读者给我留言说专栏里讲到的东西都只能在一个页面上操作，涉及到多页面的时候不知道该怎么跳页或者不知道怎么给下一个页传值，那这期分享确实来的有点晚，通过本次的分享，读...
Flutter底部导航路由实现
lentolove的博客
11-05 1188
引言 学习Flutter的基础控件的使用。 推荐学习的书籍：《Flutter实战-第二版》 Flutter官方教程 咸鱼技术团队： 1.底部导航实现 要实现这样的效果，我们需要用到以下控件： Scaffold PageView BottomNavigationBar BottomNavigationBarItem PageController 2. Widget属性说明 1.Scaffold 控件 一个完整的路由页可能会包含导航栏、抽屉菜单(Drawer) 以及底部.
flutter 路由跳转的实现示例
01-03
路由 做Android/iOS原生开发的时候，要打开一个新的页面，你得知道你的目标页面对象，然后初始化一个...Flutter路由介绍 Flutter里面有路由支持所有的路由场景，push、pop页面，页面间的参数传递等等。flutter里面的
flutter 自定义websocket路由的实现
08-25
在本文中，我们将重点讨论 Flutter 中自定义 WebSocket 路由的实现。WebSocket 是一种实时通信协议，允许客户端和服务端之间进行双向通信。在 Flutter 中，我们可以使用 WebSocket 来实现实时通信，但是默认情况下，...
Flutter 路由
m0_71902318的博客
01-28 157
flutter 路由
Flutter 路由
qq_35342288的博客
12-14 428
路由       路由(Route)在移动开发中通常指页面（Page），这个web开发中单页应用的Route概念意义是相同的。在我们之前做Android/iOS原生开发的时候，要打开一个新的页面，可以通过一个Intent或者ViewController去进行页面的跳转。在原生app开发时除了这些方式也有一些优秀的的路由框架供我们选择，这里给大家推荐一下阿里的Android开源路由框架:   AR...
Flutter利用注解生成可自定义的路由的实现
01-04
route_generator是什么 这是一个简单的 Flutter 路由生成库，只需要少量的代码，然后利用注解配合源代码生成，自动生成路由表，省去手工管理路由代码的烦恼。 特性 自定义路由名称 自定义路由动画 自定义路由参数 自定义路由逻辑 依赖 dependencies: # Your other regular dependencies here route_annotation: ^0.1.0 dev_dependencies: # Your other dev_dependencies here build_runner: ^1.5.0 route_g
Flutter路由
m0_46527751的博客
01-15 1350
Flutter路由路由基本路由的使用命名路由命名路由传值返回上一页面路由替换返回根路由 路由 在flutter中，路由就是页面之间的跳转。在 Flutter 中通过 Navigator 组件管理路由导航。并提供了管理堆栈的方法。如：Navigator.push 和 Navigator.pop Flutter 中给我们提供了两种配置路由跳转的方式： 基本路由 命名路由 基本路由的使用 主要方法 Navigator.of(context).push( MaterialPageRoute( builder:
flutter路由
weixin_45392643的博客
09-16 178
flutter Route学习
flutter 路由
weixin_44769718的博客
11-25 1932
路由页面配置 import 'package:flutter/material.dart'; import '../pages/Tabs.dart'; import '../pages/Form.dart'; import '../pages/Search.dart'; import '../pages/Product.dart'; import '../pages/ProductInfo.dart'; //配置路由 //arguments 未有参数的路由 final routes={ '/'
Flutter【路由】
越思考越清晰
08-04 910
文章目录基本路由传参命名路由传参路由单独模块化 在Flutter中通过Navigator组件管理路由导航。 并提供了管理堆栈的方法。如：Navigator.push和Navigator.pop 基本路由 RaisedButton( child: Text("跳转到搜索页面"), onPressed: (){ Naviga...
Flutter-路由
Emperor_huanzi 的博客
11-09 575
Flutter路由之fluro Fluro作为 一个Flutter的 企业级的路由框架 ，确实不错，可以解决多变的需求情况 ，是时候搞一波了 引入fluro fluro: ^1.5.1 基础配置路由 routes.dart 在routes.dart文件中配置路由，这里需要注意的事首页一定要用“/”配置 import 'package:flutter/material.dart'; impor...
flutter路由封装
07-28
通过这种方式，我们可以实现对Flutter路由的封装。\[1\]\[3\] #### 引用[.reference_title] - *1* *2* *3* [Flutter 封装fluro路由框架,提供路由,实现父子页面信息互传等功能]...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值