Flutter的普通路由

import 'package:flutter/material.dart';
import 'package:learn_flutter/pages/detail.dart';
class HomeWidget extends StatefulWidget {
    @override
    _HomeWidgetState createState() => _HomeWidgetState();
}
class _HomeWidgetState extends State<HomeWidget> {
    @override
    Widget build(BuildContext context) {
        return Container(
            child: Center(
                child: ElevatedButton(
                    child: Text('跳转到详情页面'),
                    onPressed: () {
                        // Navigator push 跳转路由
                        Navigator.of(context).push(
                            MaterialPageRoute(
                                // title 就是传递过去的参数
                                builder: (context) => DetailWidget(title: '我是路由传值'),
                            ),
                        );
                    },
                ),
            ),
        );
    }
}
// detail.dart
import 'package:flutter/material.dart';
class DetailWidget extends StatefulWidget {
    // 设置默认参数
    DetailWidget({ this.title = '详情页面' });
    final String title;
    @override
    _DetailWidgetState createState() => _DetailWidgetState(title: this.title); // 传递给子类
}
class _DetailWidgetState extends State<DetailWidget> {
    // 子类接受参数
    _DetailWidgetState({ this.title });
    final String title;
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            floatingActionButton: FloatingActionButton(
                child: Text('返回'),
                onPressed: () {
                    Navigator.of(context).pop();
                },
            ),
            appBar: AppBar(
                title: Text(this.title),
            ),
            body: Center(
                child: ElevatedButton(
                    child: Text('跳转到首页'),
                    onPressed: () {
                        // Navigator pop 是返回上一级路由
                        Navigator.of(context).pop();
                    },
                ),
            ),
        );
    }
}

路由替换：

import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
    @override
    _HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
    @override
    Widget build(BuildContext context) {
        return Center(
            child: ElevatedButton(
                child: Text('跳转到详情页面'),
                onPressed: () {
                    // Navigator.pushNamed(context, '/detail',  arguments: { "id": 123 });
                    Navigator.pushReplacementNamed(context, '/detail', arguments: { "id": 123 }); // 替换路由，如果你想用户跳转后无法回退到刚刚那个页面
                },
            ),
        );
    }
}

返回根路由：

import 'package:flutter/material.dart';
import './tabs.dart'; // 引入 根文件
class MePage extends StatelessWidget {
    MePage({this.arguments});
    final arguments;
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('我的'),
            ),
            body: Center(
                child: Column(
                    children: [
                        Text("我的${arguments['id']}"),
                        ElevatedButton(
                            onPressed: () {
                                // pushAndRemoveUntil 回到根路由方法
                                Navigator.pushAndRemoveUntil(
                                    context,
                                    MaterialPageRoute(
                                        // MyBottomNavigationBar 传递参数， tabs 构造函数中接收参数， 注意， 这里必须引入 tabs.dart 文件
                                        builder: (context) => MyBottomNavigationBar(index: 1)),
                                    (route) => route == null);
                            },
                            child: Text('回到根路由下'))
                    ],
                ),
            ),
        );
    }
}
// tabs.dart
import 'package:flutter/material.dart';
import 'home.dart';
import 'search.dart';
class MyBottomNavigationBar extends StatefulWidget {
    // 定义接收的参数
    final int index;
    MyBottomNavigationBar({this.index = 0});
    @override
    _MyBottomNavigationBarState createState() =>
        _MyBottomNavigationBarState(this.index);
}
class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
    // 子类接收赋值
    _MyBottomNavigationBarState(index) {
        this._currentIndex = index;
    }
    int _currentIndex = 0;
    List _pageList = [
        HomePage(),
        SearchPage(),
    ];
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Hello Flutter'),
            ),
            body: this._pageList[this._currentIndex],
            bottomNavigationBar: BottomNavigationBar(
                currentIndex: _currentIndex,
                onTap: (int index) {
                    setState(() {
                        this._currentIndex = index;
                    });
                },
                // iconSize: 20,
                // fixedColor: Colors.pink,
                type: BottomNavigationBarType.fixed, // 配置多个tabItem
                items: [
                    BottomNavigationBarItem(
                        icon: Icon(Icons.home),
                        label: '首页',
                    ),
                    BottomNavigationBarItem(
                        icon: Icon(Icons.search),
                        label: '搜索',
                    ),
                ],
            ),
        );
    }
}