Flutter基本路由

普通跳转
携带参数跳转
Flutter中文网
微语

Flutter中的路由通俗的讲就是,页面跳转在Flutter中通过Navigator组件管理导航。
并提供了管理堆栈的方法。如: Navigator.push 和Navigator.pop
Flutter中给我们提供了两种配置路由跳转的方式: 1,基本路由 2,命名路由

普通跳转

第一个页面

import 'package:flutter/material.dart';

import 'SecondPage.dart';  /// 引入我们的 SecondPage 页面，如果在一个 .dart 中写的可以不用写
void main() {
  runApp(MaterialApp(
    title: 'Flutter',
    home: FistPage(),
  ));
}

/// 第一个页面
class FistPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("第一个页面"),
      ),
      body: new Center(
        child: new TextButton(
            child: new Text("点击跳转"),
            onPressed: () {
              /// 跳转到新的页面我们需要调用 Navigator.push方法
              Navigator.push(
                  context,
                  new MaterialPageRoute(
                      builder: (context) => new SecondPage()));
            }),
      ),
    );
  }
}

第二个页面

import 'package:flutter/material.dart';

///   第二个页面
class SecondPage extends StatelessWidget {


  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("第二个页面"),
      ),
      body: new Center(
        //onPressed  点击事件
        child: new TextButton(
            child: new Text("返回上一个页面"),
            onPressed: () {
              /// 关闭当前页面，返回上一个页面
              Navigator.pop(context);
            }),
      ),
    );
  }
}

效果

在这里插入图片描述
点击进入我们的第二个页面

携带参数跳转

import 'package:flutter/material.dart';
import 'SecondPage.dart';  /// 引入我们的 SecondPage 页面，如果在一个 .dart 中写的可以不用写
void main() {
  runApp(MaterialApp(
    title: 'Flutter',
    home: FistPage(),
  ));
}

/// 第一个页面
class FistPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("第一个页面"),
      ),
      body: new Center(
        child: Column(
          children: [
             TextButton(
                child: new Text("点击跳转"),
                onPressed: () {
                  /// 跳转到新的页面我们需要调用 Navigator.push方法
                  Navigator.push(
                      context,
                      new MaterialPageRoute(
                          builder: (context) => new SecondPage()));
                }),

             TextButton(
                child: new Text("带参跳转"),
                onPressed: () {
                  /// 跳转到新的页面我们需要调用 Navigator.push方法
                  Navigator.push(
                      context,
                      new MaterialPageRoute(
                          builder: (context) => new SecondPage(username: "afeng最帅",password: "123456",)));
                }),
          ],
        )
      ),
    );
  }
}

import 'package:flutter/material.dart';

///   第二个页面
class SecondPage extends StatelessWidget {
String username,password;
SecondPage({this.username = "快点呀",this.password ="等的花都要谢啦"});  // 如果上一个页面没有传递参数我们设置一个默认值

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("第二个页面"),
      ),
      body: new Center(
        //onPressed  点击事件
        child:Column(
          children: [
            Row(
              children: [
                Text("用户名："),
                Text(this.username)
              ],
            ),
            Row(
              children: [
                Text("密码："),
                Text(this.password)
              ],
            )
          ],
        )
      ),
    );
  }
}