乐趣区

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

jiezi

路由: 外围是 路由映射表 .
如：名字 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?…

退出移动版