如何在macOS SwiftUI中实现类似Finder的底部状态栏？

问题概述 #

需要在macOS平台的SwiftUI项目中实现类似Finder或Transmit的底部状态栏——即固定在窗口底部、带有渐变背景、用于显示状态信息的栏，而非菜单栏附加项。尝试过bottomBar toolbar API，但该API在macOS上不支持。目前有一段临时hack代码能实现近似效果，但希望找到更优雅的方案：

VStack {
    HStack {
        ProgressView()
        Text("Doing something...")
    }
}.frame(maxHeight: .infinity, alignment: .bottomLeading)

解决方案 #

方案1：纯SwiftUI实现固定底部栏 #

这种方式无需依赖AppKit，通过ZStack和渐变组件快速实现贴近原生效果的底部状态栏，适配浅色/深色模式：

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .bottom) {
            // 主内容区域
            ScrollView {
                VStack(spacing: 20) {
                    ForEach(1...20, id: \.self) { index in
                        Text("主内容项 \(index)")
                            .frame(maxWidth: .infinity)
                            .padding()
                            .background(Color.gray.opacity(0.1))
                    }
                }
                .padding()
            }
            
            // 底部状态栏
            VStack(spacing: 0) {
                // 顶部渐变分隔线，模拟Finder的视觉效果
                LinearGradient(gradient: Gradient(colors: [Color.black.opacity(0.1), Color.clear]), startPoint: .top, endPoint: .bottom)
                    .frame(height: 1)
                
                // 状态栏内容区
                HStack(spacing: 12) {
                    ProgressView()
                    Text("正在处理...")
                    Spacer()
                    Text("共32项，已完成16项")
                }
                .padding(.horizontal, 16)
                .padding(.vertical, 8)
                .background(Color(NSColor.controlBackgroundColor))
            }
            .frame(maxWidth: .infinity)
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

优势：

• 状态栏固定在窗口底部，不随主内容滚动
• 自动适配系统外观模式，视觉风格统一
• 实现简单，无需跨框架交互

方案2：结合AppKit实现原生级状态栏 #

如果需要完全匹配Finder的视觉细节（比如渐变背景的过渡效果、和窗口边框的无缝衔接），可以通过SwiftUI与AppKit互操作实现：

步骤1：创建自定义AppKit视图

class StatusBarView: NSView {
    override func draw(_ dirtyRect: NSRect) {
        super.draw(dirtyRect)
        // 绘制底部栏渐变背景
        let gradient = NSGradient(colors: [
            NSColor.controlBackgroundColor,
            NSColor.controlBackgroundColor.withAlphaComponent(0.9)
        ])!
        gradient.draw(in: bounds, angle: 90)
        
        // 绘制顶部分隔线
        NSColor.separatorColor.setStroke()
        let lineRect = NSRect(x: 0, y: bounds.height - 1, width: bounds.width, height: 1)
        NSBezierPath(rect: lineRect).stroke()
    }
}

步骤2：封装为SwiftUI可调用组件

struct StatusBarRepresentable: NSViewRepresentable {
    let content: () -> AnyView
    
    func makeNSView(context: Context) -> NSView {
        let containerView = NSView()
        containerView.wantsLayer = true
        
        let statusBarView = StatusBarView()
        statusBarView.translatesAutoresizingMaskIntoConstraints = false
        containerView.addSubview(statusBarView)
        
        // 嵌入SwiftUI内容
        let hostingView = NSHostingView(rootView: content())
        hostingView.translatesAutoresizingMaskIntoConstraints = false
        statusBarView.addSubview(hostingView)
        
        // 设置约束
        NSLayoutConstraint.activate([
            statusBarView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
            statusBarView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
            statusBarView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor),
            statusBarView.heightAnchor.constraint(equalToConstant: 36),
            
            hostingView.leadingAnchor.constraint(equalTo: statusBarView.leadingAnchor, constant: 16),
            hostingView.trailingAnchor.constraint(equalTo: statusBarView.trailingAnchor, constant: -16),
            hostingView.topAnchor.constraint(equalTo: statusBarView.topAnchor, constant: 8),
            hostingView.bottomAnchor.constraint(equalTo: statusBarView.bottomAnchor, constant: -8)
        ])
        
        return containerView
    }
    
    func updateNSView(_ nsView: NSView, context: Context) {}
}

// 扩展View方便类型擦除
extension View {
    func eraseToAnyView() -> AnyView {
        AnyView(self)
    }
}

步骤3：在SwiftUI中使用

struct ContentView: View {
    var body: some View {
        ZStack(alignment: .bottom) {
            // 主内容区域
            ScrollView {
                // 此处添加你的主内容
                Text("示例主内容")
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .padding()
            }
            
            // 底部状态栏
            StatusBarRepresentable {
                HStack(spacing: 12) {
                    ProgressView()
                    Text("正在复制文件...")
                    Spacer()
                    Text("剩余时间: 00:45")
                }
                .eraseToAnyView()
            }
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

优势：

• 视觉效果完全匹配macOS原生App
• 状态栏与窗口底部无缝衔接，符合人机交互规范
• 支持自定义绘制细节，灵活度更高

内容的提问来源于stack exchange，提问作者user22102441