美文网首页
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)

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