fluuter的路由管理--普通路由

Posted 2020-11-26 trekxu

一 .概念

　　路由概念在前端大部分的含义都是一致的,通俗来说就是页面的跳转.如我们点击一个按钮,就可以跳转到对应的页面.

      在flutter之中,为我们内置了一个路由管理器,我们通过这个路由管理器实现我们的路由管理.

　　在flutter之中,为我们提供了两种路由方式,一种是普通路由,另外一种就是命名路由.

二 .普通路由

   我们首先实现一个这样的功能,点击页面上的按钮,让页面跳转到对应的页面.

import ‘package:flutter/material.dart‘;

import ‘./homePage.dart‘;

void main() => runApp(MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("title"),
        ),
        body: MyApp(),
      ),
    ));

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: RaisedButton(
          child: Text("跳转到home页面"),
          onPressed: () {
            Navigator.of(context).push(MaterialPageRoute(builder: (context) {
              return HomePage();
            }));
          },
        ),
      ),
    );
  }
}

　　我们在页面上定义了一个按钮,这个按钮点击之后的作用就是帮助跳转到另外的一个组件(页面上).

在这里,我们需要注意的就是红色部分的路由代码.此外,我们还需要注意,跳转到的页面也需要是一个完整的页面内容(metarial页面,否则页面的整体效果无法显示).

下面是homePage的内容.

import ‘package:flutter/material.dart‘;

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("home apge"),
        ),
        body: Container(
          width: 100,
          height: 100,
          child: Text(
            "我是一个home page",
            textDirection: TextDirection.ltr,
          ),
        ),
      ),
    );
  }
}

三 .普通路由传递参数

我们在发生页面跳转的时候,常常会传递参数,我们这次来演示一下普通路由参数传递的内容.

我们首先说明一下整体的思路,说明白之后,我们就可以非常简单的进行操作了.

我们知道每一个Widget都存在构造函数,我们实际进行页面跳转的时候也是使用对应的构造函数.

我们通过构造函数就可以完成对应参数的传递了.

RaisedButton(
              child: Text("普通路由传递参数"),
              onPressed: () {
                Navigator.of(context).push(MaterialPageRoute(
                  builder: (context){
                    return FormPage(13);
                  },
                ));
              },
            )　　

在上面的代码之中,我们这次跳转的页面使用了有参数的构造函数,这样我们跳转的页面就可以获取对应的参数信息了.

class FormPage extends StatelessWidget {

  final int id;
  const FormPage(this.id,{Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title : Text("form 页面")
          ),
          body: Center(
            child: Text("我从之前的页面获取id=$id"),
          ),
        ),
      ),
    );
  }
}

　　我们看看对应的FormPage的内容,我们这里的构造函数(红色部分的内容,这样我们就可以非常容易的获取传递过来的参数了).

 

四 .怎么定义路由的返回.

在路由之中,我们存在一个函数就是pop(),实际上我们的路由就是一个栈结构,我们可以通过pop()和push()完成对应的功能的实现.