返回箭头

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

推入的新屏幕需要有返回方式。AppBar 会自动提供返回方式：如果堆栈中它下面还有一个屏幕，应用栏会在起始位置显示一个返回箭头。

Scaffold(
  appBar: AppBar(title: const Text('Details')),
  body: ...,
)

点击箭头会将顶部屏幕从堆栈中移除，并再次显示它下面的屏幕，状态保持不变。手机自带的返回手势和 Android 返回按钮也会执行相同的操作。

应用的第一个屏幕下面没有其他屏幕，因此它的应用栏不会显示箭头。

挑战

简单

在手机上打开详情页：没有返回方式。给 DetailScreen 添加一个标题为 Details 的 AppBar，这样就会显示返回箭头。

亲手试试

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: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const DetailScreen()),
            );
          },
          child: const Text('Open details'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const Center(
        child: Text('Here are the details'),
      ),
    );
  }
}