美文网首页
Flutter 学习笔记 09 - 路由和导航(1)

Flutter 学习笔记 09 - 路由和导航(1)

作者: 三流之路 | 来源:发表于2019-01-04 21:53 被阅读0次

管理多个页面时有两个核心概念和类:Route 和 Navigator。

  • Route 是一个屏幕或页面的抽象
  • Navigator 是管理 Route 的 Widget。Navigator 通过 Route 入栈和出栈来实现页面之间的跳转。

两个页面间跳转

02 - 首个应用03 - Widget 框架 中已经用到过。

假设已有两个页面 Widget:FirstScreen,SecondScreen。Navigator.push 添加页面,Navigator.pop 弹出页面。

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: FirstScreen(),
  ));
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Launch screen'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondScreen()),
            );
          },
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Second Screen"),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go back!'),
        ),
      ),
    );
  }
}

一个参数和两个参数的 push 是一样的。

static Future<T> push<T extends Object>(BuildContext context, Route<T> route) {
    return Navigator.of(context).push(route);
}

pop 就是把自己从栈中移除。

传递数据

就是通过可选命名参数传到构造方法里面。

class SecondScreen extends StatelessWidget {
  final String title;
  final String content;
   
  // 构造方法接收两个参数
  SecondScreen({Key key, @required this.title, @required this.content}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text(content),
        ),
      ),
    );
  }
}

然后 FirstScreen 跳转时使用 SecondScreen(title: "标题", content: "内容")

相关文章

  • Flutter 学习笔记 09 - 路由和导航(1)

    管理多个页面时有两个核心概念和类:Route 和 Navigator。 Route 是一个屏幕或页面的抽象 Nav...

  • flutter 导航以及传参方式

    flutter 导航方式有基本路由和命名路由1、基本路由 ============================...

  • Flutter—— 路由(Route)和导航(Navigator

    Flutter的页面,怎么进行跳转的呢?通过路由和导航呢。 一、路由和导航,初认识 言简意赅! 路由(Route)...

  • flutter_boost

    混合开发要点 flutter engine复用 flutter路由和原生导航同步 flutter和原生数据传输->...

  • Flutter 学习笔记 10 - 路由和导航(2)

    返回数据 如果要返回数据,pop 方法还有一个重载方法,有个可选的位置参数,用于传递返回的数据。 比如 Navig...

  • 2020-11-09

    Flutter 学习笔记 ---- 2020-11-09 flutter 快速生成Model模型 pubspec....

  • Flutter 路由和导航

    大部分应用程序都包含多个页面,并希望用户能从当前屏幕平滑过渡到另一个屏幕。移动应用程序通常通过被称为“屏幕”或“页...

  • Flutter路由和导航

    管理多个页面时有两个核心概念和类:Route和 Navigator。 一个Route是一个屏幕或页面的抽象,Nav...

  • 8. 【文档讲解】路由与导航

    3-14 【文档讲解】路由与导航 路由与导航 Flutter中Intent等价于什么?(Android) 在Flu...

  • flutter路由

    在Flutter中,导航器管理应用程序的路由栈。将路由推入(push)到导航器的栈中,将会显示更新为该路由页面。 ...

网友评论

      本文标题:Flutter 学习笔记 09 - 路由和导航(1)

      本文链接:https://www.haomeiwen.com/subject/fshlrqtx.html