Flutter--路由（页面跳转）

基本路由的使用

import 'package:flutter/material.dart';
import 'package:flutter_app/pages/info.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 Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        RaisedButton(
            child: Text("信息页面"),
            onPressed: () {
              Navigator.of(context)
                  .push(MaterialPageRoute(builder: (context) => InfoPage()));
            }),
      ],
    );
  }
}

import 'package:flutter/material.dart';

class InfoPage extends StatefulWidget {
  InfoPage({Key key}) : super(key: key);
  _InfoPageState createState() => _InfoPageState();
}

class _InfoPageState extends State<InfoPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("信息"),
      ),
      body: Text("信息"),
    );
  }
}

跳转传值

import 'package:flutter/material.dart';
import 'package:flutter_app/pages/Form.dart';

class MinePage extends StatefulWidget {
  MinePage({Key key}) : super(key: key);
  _MinePageState createState() => _MinePageState();
}

class _MinePageState extends State<MinePage> {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        RaisedButton(
          child: Text("跳转传值"),
          onPressed: () {
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context)=>FormPage(title: '跳转传值',)
              )
            );
          },
        )
      ],
    );
  }
}

import 'package:flutter/material.dart';

class FormPage extends StatelessWidget {

  String title;
  FormPage({this.title="表单"});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Text('返回'),
        onPressed: (){
          Navigator.of(context).pop();
        },
      ),
      appBar: AppBar(
        title: Text(this.title),
      ),
    );
  }
}

Flutter中的命名路由

import 'package:flutter/material.dart';
import 'res/listData.dart';
import 'pages/tabs.dart';
import 'package:flutter_app/pages/Form.dart';
import 'package:flutter_app/pages/info.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Tabs(),
      // 必须在MaterialApp下进行路由配置，命名路由
      routes: {
        '/form': (context) => FormPage(),
        '/info': (context) => InfoPage()},
    );
  }
}

• 路由跳转

import 'package:flutter/material.dart';
// 无需引入相关页面可以直接使用Navigator.pushNamed进行跳转

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        RaisedButton(
            child: Text("信息页面"),
            onPressed: () {
              // 路由跳转
              Navigator.pushNamed(context, '/info');
            }),
      ],
    );
  }
}

使用官方路由配置方式对命名路由跳转进行改写

• 配置路由以及路由跳转方法

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/pages/Form.dart';
import 'package:flutter_app/pages/info.dart';
import 'package:flutter_app/pages/tabs.dart';

// 增加要跳转的页面只需要在此处添加
final routes = {
  // 配置根路由
  '/': (context, {argumment}) => Tabs(),
  // 配置需要跳转的页面
  '/form': (context) => FormPage(),
  '/info': (context, {arguments}) => InfoPage(arguments: arguments),
};

// 配置路由， 在官方代码上的优化，为固定写法
var onGenerateRoute = (RouteSettings settings) {
  // ignore: missing_return
  final String name = settings.name;
  final Function pageContentBuilder = routes[name];
  if (pageContentBuilder != null) {
    // 路由配置不为空
    if (settings.arguments != null) {
      final Route route = MaterialPageRoute(
          // 进行跳转，传参
          builder: (context) =>
              pageContentBuilder(context, arguments: settings.arguments));
      return route;
    } else {
      final Route route =
          MaterialPageRoute(builder: (context) => pageContentBuilder(context));
      return route;
    }
  }
};

• 初始化根路由

import 'package:flutter/material.dart';
import 'pages/tabs.dart';
import 'package:flutter_app/routes/routes.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
        home: Tabs(),
        // 初始化根路由
        initialRoute: '/',
        onGenerateRoute: onGenerateRoute);
  }
}

• 进行页面跳转和参数接受

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 Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        RaisedButton(
            child: Text("信息页面"),
            onPressed: () {
              // 路由跳转
              Navigator.pushNamed(context, '/info', arguments: {"id": 123});
            }),
      ],
    );
  }
}


import 'package:flutter/material.dart';

class InfoPage extends StatelessWidget {
  final arguments;
  InfoPage({this.arguments});


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("信息"),
      ),
      body: Text("路由传值${arguments != null ? arguments["id"] : '0'}"),
    );
  }
}