基于栈的导航

既然你已理解 sliver 与滚动，就可以实现屏幕之间的导航。在本课中，你将更新小屏视图，使得点击联系人分组时，会导航到该分组的联系人列表。

首先，还原自适应布局 widget 中的更改，使其在小屏上默认显示 ContactGroupsPage。

class _AdaptiveLayoutState extends State<AdaptiveLayout> {
  int selectedListId = 0;
​
  void _onContactListSelected(int listId) {
    setState(() {
      selectedListId = listId;
    });
  }
​
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final isLargeScreen = constraints.maxWidth > largeScreenMinWidth;
​
        if (isLargeScreen) {
          return _buildLargeScreenLayout();
        } else {
          return const ContactGroupsPage(); // Reverted
        }
      },
    );
  }
  // ···
}

ContactGroupsPage 已使用 _ContactGroupsView 并为其提供了回调。需要更新该回调，使得点击分组时进行导航，而不是将分组打印到控制台。

确保 lib/screens/contact_groups.dart 中的 onListSelected 回调和 import 实现如下：

import 'contacts.dart';
​
class ContactGroupsPage extends StatelessWidget {
  const ContactGroupsPage({super.key});
​
  @override
  Widget build(BuildContext context) {
    return _ContactGroupsView(
      onListSelected: (list) => Navigator.of(context).push(
        CupertinoPageRoute<void>(
          title: list.title,
          builder: (context) => ContactListsPage(listId: list.id),
        ),
      ),
    );
  }
}

这一小段代码包含本页最重要的新信息。

Navigator.of(context) 从 widget 树中获取最近的 Navigator widget。 push 方法向 Navigator 的栈添加新路由，并显示 builder 属性返回的 widget。

这是使用基于栈的导航的最基本实现，新屏幕被 push 到当前屏幕之上。要返回上一屏幕，可使用 Navigator.pop 方法。

CupertinoPageRoute 创建 iOS 风格的页面转场，具有以下特性：

• 从右侧滑入的动画。

• 自动支持返回按钮。

• 正确的标题处理。

• 支持滑动返回手势。

对于大屏，你需要一个不进行导航、而是更新主内容区域的侧边栏。得益于上一步的重构，创建该组件更加直接。将此 widget 添加到 lib/screens/contact_groups.dart 底部：

/// A sidebar component for selecting contact groups on large screens.
class ContactGroupsSidebar extends StatelessWidget {
  const ContactGroupsSidebar({
    super.key,
    required this.selectedListId,
    required this.onListSelected,
  });
​
  final int selectedListId;
  final void Function(int) onListSelected;
​
  @override
  Widget build(BuildContext context) {
    return _ContactGroupsView(
      selectedListId: selectedListId,
      onListSelected: (list) => onListSelected(list.id),
    );
  }
}

该侧边栏组件复用 _ContactGroupsView 并提供不同的回调。它不进行导航，而是用被点击列表的 ID 调用 onListSelected。它还将 selectedListId 传给 _ContactGroupsView，以便高亮显示选中项。

对于大屏布局，你需要一个不显示导航控件的详情视图。与侧边栏一样，可以通过复用 _ContactListView 来重新创建。将此 widget 添加到你的 contacts.dart 文件底部：

class ContactListDetail extends StatelessWidget {
  const ContactListDetail({super.key, required this.listId});
​
  final int listId;
​
  @override
  Widget build(BuildContext context) {
    return _ContactListView(listId: listId, automaticallyImplyLeading: false);
  }
}

详情视图复用 _ContactListView，并将 automaticallyImplyLeading 参数设为 false 以隐藏返回按钮，因为导航由侧边栏处理。

现在，将侧边栏连接到你的自适应布局。更新 adaptive_layout.dart 文件以导入必要文件并更新大屏布局：

import 'package:flutter/cupertino.dart';
​
import 'contact_groups.dart';
import 'contacts.dart';

然后更新 _buildLargeScreenLayout 方法：

Widget _buildLargeScreenLayout() {
  return CupertinoPageScaffold(
    backgroundColor: CupertinoColors.extraLightBackgroundGray,
    child: SafeArea(
      child: Row(
        children: [
          SizedBox(
            width: 320,
            child: ContactGroupsSidebar(
              selectedListId: selectedListId,
              onListSelected: _onContactListSelected,
            ),
          ),
          Container(width: 1, color: CupertinoColors.separator),
          Expanded(child: ContactListDetail(listId: selectedListId)),
        ],
      ),
    ),
  );
}

这段代码创建经典的菜单-详情布局，侧边栏控制详情区域的内容。

热重载应用并测试导航：

小屏（宽度 < 600px）：

• 点击联系人分组以导航到联系人详情。

• 使用返回按钮或滑动手势返回。

• 这是经典的基于栈的导航流程。

大屏（宽度 > 600px）：

• 在侧边栏中点击联系人分组以更新详情视图。

• 没有导航栈。选择会更新内容区域。

• 这是主从 (master-detail) 界面模式。

应用会根据屏幕尺寸自动选择合适的导航模式。这在手机和平板上都能提供最佳体验。