Landmarks: Refining the system provided Liquid Glass effect in toolbars
Organize toolbars into related groupings to improve their appearance and utility.
Overview
The Landmarks app lets people explore interesting sites around the world. Whether it’s a national park near their home or a far-flung location on a different continent, the app provides a way for people to organize and mark their adventures and receive custom activity badges along the way.
This sample demonstrates how to refine the system provided glass effect in toolbars. In LandmarkDetailView, the sample adds toolbar items for:
sharing a landmark
adding or removing a landmark from a list of Favorites
adding or removing a landmark from Collections
showing or hiding the inspector
The system applies Liquid Glass to the toolbar items automatically.
[Image]
Organize the toolbar items into logical groupings
To organize the toolbar items into logical groupings, the sample adds ToolbarSpacer items and passes fixed as the sizing parameter to divide the toolbar into sections:
.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()
}
}
}