打开新页面

本课属于 Coddy Flutter 学习旅程的“列表和屏幕”单元。第 18 课，共 33 课。

应用通常不止一个屏幕：先是列表，然后是某个项目的详情页，再然后是设置页面。在 Flutter 中，屏幕是一个 widget，通常是单独类中的 Scaffold。

Navigator 会把屏幕保存在一个堆栈中，就像一叠卡片。最上面的就是你看到的屏幕。Navigator.push 会把新屏幕放到最上面：

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const AboutScreen()),
);

MaterialPageRoute 会像手机上的页面切换一样滑入新屏幕。它的 builder 是一个函数，会返回要显示的屏幕。

context 会告诉 Navigator 你在 widget 树中的位置。这就是为什么 HomeScreen 是一个独立的类，位于 MaterialApp 内部：它的 context 可以找到 MaterialApp 创建的导航器。

挑战

简单

About this app 按钮目前还没有任何作用。让它使用 Navigator.push 打开 AboutScreen。

亲手试试

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: const Text('About this app'),
        ),
      ),
    );
  }
}

class AboutScreen extends StatelessWidget {
  const AboutScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('About')),
      body: const Center(
        child: Text('Made with Flutter'),
      ),
    );
  }
}