1.3 Landmarks:优化工具栏中系统提供的 Liquid Glass 效果

原文链接: https://developer.apple.com/documentation/swiftui/landmarks-refining-the-system-provided-glass-effect-in-toolbars

1.3 Landmarks:优化工具栏中系统提供的 Liquid Glass 效果

把工具栏组织成相关的分组,改善它们的外观与实用性。

概述

Landmarks 应用让人们探索世界各地有趣的景点。无论是家附近的国家公园,还是另一个大陆上遥远的地点,这个应用都提供了一种方式来整理和标记自己的探险,并沿途获得自定义的活动徽章。

这个示例演示如何优化工具栏中系统提供的玻璃效果。在 LandmarkDetailView 中,示例添加了用于下列操作的工具栏项:

  • 分享某个景点
  • 在「收藏」列表中添加或移除某个景点
  • 在「合集」中添加或移除某个景点
  • 显示或隐藏检查器

系统会自动把 Liquid Glass 应用到工具栏项上。

iPad 上富士山景点详情视图的图像,工具栏和部分侧边栏可见。工具栏项显示了 Liquid Glass 效果。从前缘到后缘依次是返回按钮、分享按钮、收藏按钮、合集按钮、信息按钮和搜索栏。

把工具栏项组织成合理的分组

为把工具栏项组织成合理的分组,示例添加了 ToolbarSpacer 项,并把 fixed 作为 sizing 参数传入,从而把工具栏划分为若干区段:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.toolbar {
    ToolbarSpacer(.flexible)

    ToolbarItem {
        ShareLink(item: landmark, preview: landmark.sharePreview)
    }

    ToolbarSpacer(.fixed)
    
    ToolbarItemGroup {
        LandmarkFavoriteButton(landmark: landmark)
        LandmarkCollectionsMenu(landmark: landmark)
    }
    
    ToolbarSpacer(.fixed)

    ToolbarItem {
        Button("Info", systemImage: "info") {
            modelData.selectedLandmark = landmark
            modelData.isLandmarkInspectorPresented.toggle()
        }
    }
}