flutter学习笔记01 -- 命名路由的跳转

1. 首先,在MaterialApp中传递onGenerateRoute(路由跳转触发的事件), 指定起始路由

import 'package:flutter/material.dart'; //引入material包(ui库)
import 'BottomTabs.dart';
import './router.dart' as router;//路由跳转时执行的方法


//入口函数
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  MyApp() {
    print(this.routes['/search']);
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //home: BottomTabs(),
      // 命名路由的配置
      //routes: this.routes,
      onGenerateRoute: router.generateRoute,
      initialRoute: '/',
    );
  }
}

2. router.dart中配置好路由的定向, 这个文件由于批量管理路由

import 'package:flutter/material.dart';
// 路由管理

import 'pages/Personal/PersonalPage.dart';
import 'pages/Search/SearchPage.dart';
import './HomePage.dart';

Route<dynamic> generateRoute(RouteSettings settings) {
  var arguments = settings.arguments;
  print(settings.name);
  switch (settings.name) {
    case '/Search':
      return MaterialPageRoute(
      //SearchPage页定义了参数, 跳转过来要接收该参数
          builder: (context) => SearchPage(arguments: arguments));
    case '/Personal':
      return MaterialPageRoute(builder: (context) => PersonalPage());
    case '/':
      return MaterialPageRoute(builder: (context) => HomePage());
    default:
      return MaterialPageRoute(builder: (context) => HomePage());
  }
}

3. HomePage中设置跳转, 跳转到SearchPage页

import 'package:flutter/material.dart'; //引入material包(ui库)

//首页
class HomePage extends StatefulWidget {
  HomePage({Key? key}) : super(key: key);

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

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          child: Text('跳转至搜索页'),
          onPressed: () {
            //命名路由跳转
            Navigator.pushNamed(context, '/Search',
                arguments: {'searchVal': 'aaa'});
          },
        ),
      ),
    );
  }
}

4. SearchPage页接收参数

import 'package:flutter/material.dart'; //引入material包(ui库)

//搜索页
class SearchPage extends StatefulWidget {
  final arguments;

  const SearchPage({this.arguments});

  @override
  _SearchPageState createState() => _SearchPageState(
      this.arguments != null ? this.arguments['searchVal'] : '0');
}

class _SearchPageState extends State<SearchPage> {
  _SearchPageState(this.searchVal);
  String searchVal = "";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('搜索'),
      ),
      body: Column(
        children: [
          Text(this.searchVal),
          FloatingActionButton(
            child: Text('点击返回'),
            onPressed: () {
              //退出当前的堆,即返回上一级页面
              Navigator.of(context).pop();
            },
          )
        ],
      ),
    );
  }
}