关于python:Flutter之路由管理页面跳转

路由:外围是 路由映射表.
如:名字 detail 映射到 DetailPage 页面等

在Flutter中,路由治理次要有两个类:Route和Navigator.

Route

一个页面要想被路由对立治理,必须包装为一个Route

Navigator

治理所有的Route的Widget,通过一个Stack来进行治理.

MaterialApp、CupertinoApp、WidgetsApp它们默认是有插入Navigator的,在须要的时候,只须要间接应用即可.
Navigator.of(context)

Navigator罕用办法:

// 路由跳转:传入一个路由对象
Future<T> push<T extendsObject>(Route<T> route)

// 路由跳转:传入一个名称(命名路由)
Future<T> pushNamed<T extendsObject>(
  String routeName, {
    Object arguments,
  })

// 路由返回:能够传入一个参数
bool pop<T extendsObject>([ T result ])

命名路由

  • 命名路由是将名字和路由的映射关系,在一个中央进行对立的治理
  • 有了命名路由,就能够通过Navigator.pushNamed() 办法来跳转到新的页面

命名路由的地位

放在MaterialApp的 initialRoute 和 routes 中

  • initialRoute:设置应用程序从哪一个路由开始启动,设置了该属性,就不须要再设置home属性了
  • routes:定义名称和路由之间的映射关系,类型为 Map<String, WidgetBuilder>
  • onGenerateRoute: 通过pushNamed进行跳转,然而对应的name没有在routes中有映射关系,那么就会执行 onGenerateRoute 钩子函数 . 另外, onGenerateRoute也能够作为页面跳转的权限管制.;
  • onUnknownRoute: 如果关上的一个路由名称是基本不存在的,这个时候能够跳转到一个对立的谬误页面。

关上命名路由时,如果指定的路由名在路由表中已注册,则会调用路由表中的builder函数来生成路由组件;如果路由表中没有注册,才会调用onGenerateRoute来生成路由。

残缺代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue, splashColor: Colors.transparent),
      initialRoute: "/",
      routes: {
        "/": (context) => MyHomePage(title: 'Flutter Demo Home Page'), //注册首页路由
        // "/home": (ctx) => HomePage(),
        "/detail": (ctx) => DetailPage()
      },
      onGenerateRoute: (settings) {  //路由钩子 .  手动创立对应的Route进行返回;
        if (settings.name == "/about") {   //settings.name: 跳转的门路名称
          return MaterialPageRoute(builder: (ctx) {
            return AboutPage(settings.arguments);  //settings.arguments:跳转时携带的参数
          });
        }
        return null;
      },
      onUnknownRoute: (settings) {
        return MaterialPageRoute(builder: (ctx) {
          return UnknownPage();
        });
      },
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // final message = ModalRoute.of(context).settings.arguments;

  var _message = '';

  _onPushTop(BuildContext context) {
    final future = Navigator.of(context)
        .pushNamed('/detail', arguments: "a home message of naned route"); //被动跳转时arguments传递参数

    // 2.获取后果
    future.then((res) {
      setState(() {
        _message = res;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              '显示后果: ' + _message,
            ),
            FlatButton(
              child: Text("跳转下一页", style: TextStyle(color: Colors.black)),
              onPressed: () => _onPushTop(context),
            ),
            RaisedButton(
              child: Text("关上对于页"),
              onPressed: () {
                Navigator.of(context).pushNamed(AboutPage.routeName,
                    arguments: "a home message");
              },
            ),
            RaisedButton(
              child: Text("关上未知页面"),
              onPressed: () {
                Navigator.of(context).pushNamed("/abc");
              },
            ),
          ],
        ),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  // 按钮点击执行的代码
  _onBackTap(BuildContext context) {
    Navigator.of(context).pop("a detail message");
  }

  @override
  Widget build(BuildContext context) {
    
    //接管下级页面传过来的参数
    final message = ModalRoute.of(context).settings.arguments;

    return new Scaffold(
      appBar: new AppBar(
        title: Text('这是第二页'),
        leading: IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.of(context).pop("a back detail message"); //pop跳转时间接放入参数
          },
        ),
      ),
      body: Center(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                '首页带来的内容: ' + message,
              ),

              // child:
              RaisedButton(
                child: Text("返回首页"),
                onPressed: () => _onBackTap(context),
              ),
            ]),
      ),
    );
  }
}

class AboutPage extends StatelessWidget {
  static const String routeName = "/about";
  final String message;

  AboutPage(this.message);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("对于页面"),
      ),
      body: Center(
        child: Text(
          message,
          style: TextStyle(fontSize: 30, color: Colors.red),
        ),
      ),
    );
  }
}

class UnknownPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("谬误页面"),
      ),
      body: Container(
        child: Center(
          child: Text("页面跳转谬误"),
        ),
      ),
    );
  }
}

参考文章

Flutter 写的app, 须要源码能够私信~~

  • 简繁火星字体转换
  • 哄女友神器
  • 号码测吉凶
  • 电视节目直播表

最好的笔记软件

https://www.wolai.com/signup?…

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据