SwiftUI 自定工具栏

工具栏API是我在SwiftUI中最喜欢的API之一。它允许您以非常明确的方式定义工具栏及其项目，并在不同的平台上表现不同。下一代SwiftUI框架为我们带来了更多自定义工具栏的方法。下面，我们将了解 SwiftUI 中新的工具栏 API。

工具栏可见性

让我们从新的视图修饰符开始，允许我们控制工具栏的可见性。

struct ContentView: View {
    var body: some View {
        ScrollView {
            Image("beach")
                .resizable()
                .scaledToFit()
        }
        .ignoresSafeArea(.container, edges: .top)
        .navigationTitle("Hello")
        .toolbar(.hidden, for: .navigationBar)
    }
}

如上例所示，新的工具栏视图修饰符允许我们隐藏或显示由SwiftUI控制的任何工具栏。我们不仅可以使用它来控制导航栏的可见性，还可以控制选项卡和底部栏的可见性。

struct ContentView: View {
    var body: some View {
        ScrollView {
            Image("beach")
                .resizable()
                .scaledToFit()
        }
        .ignoresSafeArea(.container, edges: .top)
        .navigationTitle("Hello")
        .toolbar(.hidden, for: .tabBar)
    }
}

工具栏背景可见性

另一个新的视图修饰符允许我们控制SwiftUI拥有的任何栏的后台可见性。

struct ContentView: View {
    var body: some View {
        ScrollView {
            Image("beach")
                .resizable()
                .scaledToFit()
        }
        .ignoresSafeArea(.container, edges: .top)
        .navigationTitle("Hello")
        .toolbarBackground(.hidden, for: .navigationBar)
    }
}

工具栏背景可见性视图修饰符允许我们在工具栏下显示图像时创建漂亮的半透明效果。

工具栏配色方案

今年工具栏API的另一个令人兴奋的补充是有机会控制特定工具栏的配色方案。您可以为工具栏设置首选配色方案，独立于视图层次结构的配色方案。

struct ContentView: View {
    var body: some View {
        ScrollView {
            Image("beach")
                .resizable()
                .scaledToFit()
        }
        .navigationTitle("Hello")
        .toolbarColorScheme(.dark, for: .navigationBar)
    }
}

工具栏标题菜单

iOS 16提供了新的用户体验，允许我们在导航栏的标题中显示弹出式菜单。

struct TitleMenuExample: View {
    @State private var date = Date.now
    @State private var datePickerShown = false
    
    var body: some View {
        NavigationStack {
            Text(date, style: .date)
                .navigationTitle(Text(date, style: .date))
                .navigationBarTitleDisplayMode(.inline)
                .toolbarTitleMenu {
                    Button("Pick another date") {
                        datePickerShown = true
                    }
                }
                .sheet(isPresented: $datePickerShown) {
                    DatePicker(
                        "Choose date",
                        selection: $date,
                        displayedComponents: .date
                    )
                    .datePickerStyle(.graphical)
                    .presentationDetents([.medium])
                    .presentationDragIndicator(.visible)
                }
        }
    }
}

上面的代码在导航栏的标题中显示一个小箭头，允许用户按下它。SwiftUI 会显示一个弹出式菜单，其中有一个按钮，其中显示模态表中的日期选择器。

工具栏角色

iPadOS 16 的另一个新外观是编辑器工具栏。您可以将工具栏的角色设置为编辑器。在这种情况下，SwiftUI会在特定工具栏的中心显示工具栏项。它还允许用户通过添加和删除辅助工具栏项来自定义它们。

struct CollapsingToolbarItems: View {
    var body: some View {
        NavigationStack {
            Text("Hello")
                .toolbar {
                    ToolbarItem(placement: .primaryAction) {
                        Button("Primary action") {}
                    }
                    
                    ToolbarItem(
                        id: "copy",
                        placement: .secondaryAction,
                        showsByDefault: true
                    ) {
                        Button("copy") {}
                    }
                    
                    ToolbarItem(
                        id: "delete",
                        placement: .secondaryAction,
                        showsByDefault: false
                    ) {
                        Button("delete") {}
                    }
                }
                .toolbarRole(.editor)
        }
    }
}

在上面的示例中，我们将工具栏角色设置为编辑器。我们还为每个工具栏项目设置标识符。SwiftUI使用标识符来存储工具栏设置的用户配置。请记住，您应该为工具栏项目提供稳定的标识符，以提供一致的工具栏自定义体验。

辅助工具栏项目

当前一代的 SwiftUI 框架引入了辅助工具栏操作的新位置。它还会自动将它们折叠成单个工具栏项，通过菜单显示折叠项目列表。

struct SecondaryToolbarItemsExample: View {
    var body: some View {
        NavigationStack {
            Text("Hello")
                .toolbar {
                    ToolbarItem(placement: .primaryAction) {
                        Button("Primary action") {}
                    }
                    
                    ToolbarItem(placement: .secondaryAction) {
                        Button("Secondary action 1") {}
                    }
                    
                    ToolbarItem(placement: .secondaryAction) {
                        Button("Secondary action 2") {}
                    }
                }
                
        }
    }
}

结论

今天，我们学习了一系列新的API，允许我们在SwiftUI中自定义工具栏。

• 原文(英文)：https://swiftwithmajid.com/2022/09/07/customizing-toolbars-in-swiftui/