【Flutter】Flutter 如何切换页面

一、简介

什么是页面切换呢？简单来说，页面切换就是在应用的不同界面之间进行跳转。例如，在一个电影应用中，从电影列表页跳转到某部电影的详情页，就是一个页面切换的例子。

如果你想深入学习 Flutter，掌握更多的技巧和最佳实践，我有一个好消息要告诉你：我们有一个全面的 Flutter专栏->Flutter Developer 101 入门小册 等待着你。在那里，你将获得完整的、系统的 Flutter 学习资料，包括详细的代码示例和深入的概念解析。更重要的是，我们的专栏正在不断更新和完善，而价格也会随着内容的丰富而逐渐上调。所以，现在加入，你将以最优惠的价格获得所有的内容。现在，让我们开始今天的学习吧！

二、Navigator 的使用

在 Flutter 中，我们使用 Navigator 来实现页面切换。Navigator 是一个管理路由（Route）的工具，它维护了一个路由栈。当我们要跳转到新的页面时，就会把新的路由压入栈中，这个操作叫做 push。当我们想要返回上一个页面时，就会把当前路由从栈中弹出，这个操作叫做 pop。

三、实际示例：电影应用的页面切换

接下来，我们以一个简单的电影应用为例，展示如何在 Flutter 中实现页面切换。这个应用包含两个页面：电影列表页和电影详情页。

首先，我们创建电影列表页。在这个页面中，我们会显示一些电影的标题。当用户点击某个标题时，应用会跳转到对应的电影详情页。

class MovieListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('电影列表'),
      ),
      body: ListView.builder(
        itemCount: movies.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(movies[index]),
            onTap: () {
              // 在这里我们会调用 API 获取电影详情，然后跳转到详情页
              // ...
              Navigator.push(context, MaterialPageRoute(builder: (context) => MovieDetailPage(movie)));
            },
          );
        },
      ),
    );
  }
}

然后，我们创建电影详情页。在这个页面中，我们会显示电影的详细信息。

class MovieDetailPage extends StatelessWidget {
  final Movie movie;

  MovieDetailPage(this.movie);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(movie.title),
      ),
      body: Text('这里是 ' + movie.title + ' 的详情。'),
    );
  }
}

四、完整代码

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '电影应用',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MovieListPage(),
    );
  }
}

class Movie {
  final String title;

  Movie(this.title);
}

final List<Movie> movies = List<Movie>.generate(
  20,
  (i) => Movie('电影 $i'),
);

class MovieListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('电影列表'),
      ),
      body: ListView.builder(
        itemCount: movies.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(movies[index].title),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => MovieDetailPage(movies[index]),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

class MovieDetailPage extends StatelessWidget {
  final Movie movie;

  MovieDetailPage(this.movie);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(movie.title),
      ),
      body: Text('这里是 ' + movie.title + ' 的详情。'),
    );
  }
}

这段代码包含了我们所需的所有部分，包括初始化应用、定义电影模型、电影列表页、电影详情页，以及在电影列表页中实现点击标题切换到电影详情页的功能。这是一个简单但实用的示例，符合我们的需求。

五、 总结

在这篇文章中，我们学习了如何在 Flutter 中实现页面切换。我们先了解了 Flutter 和页面切换的基本概念，然后学习了如何使用 Navigator 来实现页面切换。最后，我们通过一个实际的电影应用示例，展示了如何在实际应用中实现页面切换。

如果你对 Flutter 感兴趣，想要更深入地学习，那么我要推荐你一个很棒的资源：我们的 Flutter专栏->Flutter Developer 101 入门小册。在那里，你将获得完整的、系统的 Flutter 学习资料，包括详细的代码示例和深入的概念解析。比如，你知道如何使用 Flutter 构建一个完整的应用吗？在我们的专栏中，你将找到答案。更重要的是，我们的专栏正在不断更新和完善，而价格也会随着内容的丰富而逐渐上调。所以，现在加入，你将以最优惠的价格获得所有的内容。让我们一起在 Flutter 的世界中继续探索吧！如果你想了解更多，可以先阅读我们的 一站式解决你的需求，Flutter Developer 101 入门小册 专栏指引。