用按钮返回

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

返回箭头并不是返回的唯一方式。按下“保存”或“完成”按钮时，也应该关闭当前页面。Navigator.pop 会从栈顶移除当前页面，效果和返回箭头相同：

ElevatedButton(
  onPressed: () {
    Navigator.pop(context);
  },
  child: const Text('Save'),
)

push 和 pop 是一对操作：push 会将页面压入栈中，pop 会将页面移出栈。如果再次推入主页，并不会返回，而是会在栈顶再放一个主页，页面上的返回箭头会指向设置页面。

挑战

简单

设置界面上的 Save 按钮没有任何作用。让它关闭设置界面，并使用 Navigator.pop 返回主界面。

亲手试试

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 SettingsScreen()),
            );
          },
          child: const Text('Open settings'),
        ),
      ),
    );
  }
}

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

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