flutter学习之路由管理

133 阅读1分钟

1、概述

管理多个页面时有两个核心概念和类:Route和 Navigator。 一个route是一个屏幕或页面的抽象,Navigator是管理route的Widget。Navigator可以通过route入栈和出栈来实现页面之间的跳转。

2、导航到新路由方法

a、Navigator.of(context).push(route)
b、Navigator.push(context,route)

//导航到新路由(通过路由名打开路由页并且携带参数)

Navigator.pushNamed(context, "home_page", arguments: "App首页");
如何接收参数?
import 'package:flutter/material.dart';
import 'package:flutter_app/demo/page/MinePage.dart';

import '../widget/WidgetCustom.dart';

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return HomePageState();
  }
}

class HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    //获取路由参数
    var args=ModalRoute.of(context).settings.arguments;
    return new Scaffold(

      appBar: new AppBar(
        title: new Text(args),
      ),
      //整合
      body: new ListView(
        children: <Widget>[

          //第5步:实现图像部分
          new Image.asset('images/like4.jpg'),
        
        ],
      ),
    );
  }
}

3、注册路由

	....
    return MaterialApp(
      title: "flutter",
      //注册路由表
      routes: {
        "home_page":(context)=>HomePage(),
        "main_page":(context)=>MainPage()//注册主页路由
      },
      },
     home: MainPage(),
     .....

4、设置启动页

	....
    return MaterialApp(
      ....
     home: MainPage(),
     .....

....
    return MaterialApp(
    	initialRoute: "main_page",//名为“main_page”作为应用home 的首页
      title: "flutter",
      //注册路由表
      routes: {
        "home_page":(context)=>HomePage(),
        "main_page":(context)=>MainPage()//注册主页路由
      },
      },
     .....

5、路由跳转统一处理

//路由钩子 主要作用权限或者是否登录统一管理
      onGenerateRoute: (RouteSettings settings){
        return MaterialPageRoute(builder:(context){
          String routeName=settings.name;

        });
      },

示例:

import 'package:flutter/material.dart';
import 'package:flutter_app/demo/page/HomePage.dart';

import 'MainPage.dart';

void main() => runApp(flutterApp());

class flutterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      initialRoute: "main_page",//名为“main_page”作为应用home 的首页
      title: "flutter",
      //注册路由表
      routes: {
        "home_page":(context)=>HomePage(),
        "main_page":(context)=>MainPage()//注册主页路由
      },
      //路由钩子 主要作用权限或者是否登录统一管理
      onGenerateRoute: (RouteSettings settings){
        return MaterialPageRoute(builder:(context){
          String routeName=settings.name;

        });
      },
    );
  }
}