小菜鸡开始学习flutter之二十九

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第29天，点击查看活动详情

今日目标

今日主要学习了解Flutter中路由的一些知识，毕竟写页面离不开各种页面跳转，所以路由对我们来说是挺重要的一块内容。

flutter中的路由通俗的讲就是页面跳转，再Flutter中通过navigator组件管理路由导航，并提供了管理堆栈的方法，如：Navigator.push和Navigator.pop
Flutter中给我们提供了两种配置路由跳转到方式：

• 基本路由
• 命名路由

基本路由

比如我们现在想从HomePage组件跳转到SearchPage组件 1.需要再HomePage中引入SearchPage.dart import './SearchPage.dart' 2.在HomePage中通过下面方法跳转

Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context){return SearchPage()}))

整体代码如下 // HomePage.dart

import 'package:flutter/material.dart';
import './SearchPage.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
            onPressed: () {
              Navigator.of(context)
                  .push(MaterialPageRoute(builder: (BuildContext context) {
                return SearchPage();
              }));
            },
            child: Text('跳转到SearchPage'))
      ],
    );
  }
}

// SearchPage.dart

import 'package:flutter/material.dart';

class SearchPage extends StatefulWidget {
  SearchPage({Key? key}) : super(key: key);

  @override
  State<SearchPage> createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('进入搜索页面'),
      ),
      body: Center(
        child: Text('this is search page'),
      ),
    );
  }
}

如动图所示，我们就完成了一个间的路由跳转功能，要注意的是navigator.of这一长串都是固定的写法，只有最后return是变化的。
基本路由不仅可以跳转页面，还可以传值给要跳转的页面。

我们只需要简单的修改下SearchPage.dart页面就好了 // Searchpage.dart

String title;
SearchPage({this.title = '搜索', Key? key}) : super(key: key);

这里定义了可选传参title,并将其作为appbar的传入值。然后再Home.dart中传入内容就可以再Saerchpage.dart中显示出来了

Navigator.of(context)
                  .push(MaterialPageRoute(builder: (BuildContext context) => SearchPage(title: '你好啊')));

可以看到我们搜索页面的标题产生了变化，显示的内容正是home页面传入的内容。\

细心的同学可能注意到在跳转到Search页面后，顶部多了一个返回的按钮，这个是自动添加的。我们也可以自己手动增加一个返回按钮。只需要使用Navigator.pop方法就可以实现

import 'package:flutter/material.dart';

class SearchPage extends StatelessWidget {
  String title;
  SearchPage({this.title = '搜索', Key? key}) : super(key: key);

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

如动图所示，我们既可以通过顶部的返回按钮返回，也可以通过我们自己定义的返回按钮返回上一页。

明天我们在继续学习命名路由相关知识

ending

持续学习~~ 上文如有错误还请掘友指正~~ 谢谢