如何在 SwiftUI for macOS 中创建首选项样式工具栏？答案

【问题标题】：How do you create a Preferences Style toolbar in SwiftUI for macOS?如何在 SwiftUI for macOS 中创建首选项样式工具栏？
【发布时间】：2021-09-27 21:38:08
【问题描述】：

我正在尝试为 macOS 上的 SwiftUI 设置视图创建首选项样式工具栏（文本上方的图标）。使用以下代码：

struct PreferencesView: View {
    
    //MARK: Constants and Variables
    
    @AppStorage("authToken") var authToken: String = ""
    @AppStorage("author") var author: String = ""

    
    //MARK: Main
    var body: some View {
        VStack {
            HStack {
                VStack (alignment: .leading, spacing: 10) {
                    Text("Author:")
                    Text("GitHub Auth Token:")
                }
                VStack {
                    TextField("", text: $author)
                    TextField("", text: $authToken)
                }
            }
            .padding()
            
            Spacer()
        }

        .toolbar {
            ToolbarItem(placement: .principal) {
                Button {
                } label: {
                    Label {
                        Text("General")
                    } icon: {
                        Image (systemName: "gearshape")
                    }
                    .labelStyle (VerticalLabelStyle()) //custom label style
                }
            }
        }
        .frame(width: 480, height: 320)
    }
}

结果是一个仅显示底部的按钮。

标签样式定义如下：

struct VerticalLabelStyle: LabelStyle {

    @ViewBuilder
    func makeBody(configuration: Configuration) -> some View {
        VStack {
            configuration.icon
                .font(.largeTitle)
            configuration.title
        }
    }
}

有人知道如何在 macOS 上的 SwiftUI 中成功创建这个吗？

【问题讨论】：

看起来您的.font(.largeTitle)（也适用于图片）太大而无法放入空间，请改用.font(.body)。
@workingdog，谢谢，但 .largeTitle 仅适用于图像，我是故意这样做的。即使我将其更改为 .body，它仍然不适合。

标签： macos swiftui toolbar

【解决方案1】：

您是否在使用 SwiftUI 应用生命周期？如果是这样，请将TabView 添加到您的Settings 视图中，选项卡将自动出现在工具栏中：

Settings {
    TabView {
        PreferencesView()
            .tabItem {
                Label("General", systemImage: "gearshape")
            }
    }
}

如果您不使用 SwiftUI 应用程序生命周期，那么我认为您需要使用 NSToolbar 手动构建这种样式的工具栏。

【讨论】：

【解决方案2】：

我找到了 Apple 推荐的方法，方法是放入 TabView。效果很好。

var body: some View {
        TabView {
            GeneralSettingsView
                .tabItem {
                    Label("General", systemImage: "gearshape")
                }
        }
    }

【讨论】：

【解决方案3】：

这里有一种可能的方式：

struct ContentView: View {
    
    @AppStorage("authToken") var authToken: String = ""
    @AppStorage("author") var author: String = ""

    var body: some View {
        VStack {
            HStack {
                VStack (alignment: .leading, spacing: 10) {
                    Text("Author:")
                    Text("GitHub Auth Token:")
                }
                VStack {
                    TextField("", text: $author)
                    TextField("", text: $authToken)
                }
            }
            .padding()
            
            Spacer()
        }
        .toolbar(content: {
            
            ToolbarItem(placement: .principal) {

                HStack {
                    
                    ToolbarItemView(string: "General", imageSystemName: "gearshape", action: actionOfGeneral)
                    
                    ToolbarItemView(string: "About", imageSystemName: "info.circle", action: actionOfAbout)
                }
 
            }
            
        })
        .frame(width: 480, height: 320)
    }
    
    private func actionOfGeneral() { print("General clicked!") }
    private func actionOfAbout() { print("About clicked!") }

}


struct ToolbarItemView: View {
    
    let string: String
    let imageSystemName: String
    let action: () -> Void
    
    @State private var isPressing: Bool = Bool()
    var body: some View {
        
        VStack(spacing: 2.0) {
            Image(systemName: imageSystemName)
            Text(string)
        }
        .frame(width: 50)
        .background(Color.white.opacity(0.01))
        .padding(.horizontal, 5.0)
        .padding(.vertical, 2.0)
        .overlay(RoundedRectangle(cornerRadius: 5.0).stroke(Color.secondary.opacity(0.5), style: StrokeStyle(lineWidth: 1.0)))
        .opacity(isPressing ? 0.75 : 1.0)
        .scaleEffect(isPressing ? 0.95 : 1.0)
        .gesture(DragGesture(minimumDistance: .zero, coordinateSpace: .local).onChanged { _ in isPressing = true }.onEnded { _ in isPressing = false; action() })
        .animation(Animation.interactiveSpring(), value: isPressing)
        
    }
    
}

【讨论】：

感谢您的上述回复，但我正在尝试在标题栏下方显示大按钮的首选项视图上重新创建按钮。当我将您的toolbarItemView 放入我的工具栏中时，它会遇到与上面显示的相同的问题。