如何使用SwiftUI在状态栏添加类似照片应用的按钮？求多种实现方案

我希望在状态栏区域添加一个类似苹果照片应用的按钮，推测苹果并未使用ignoresSafeArea实现该效果，因此需要多种不同的实现方案。

我曾尝试用以下代码实现类似效果：

VStack {
  HStack {
    Button(action: addItem) {
      Label("Add Item", systemImage: "plus")
    }.padding([.top, .leading], 25)
    Spacer()
                
  }.ignoresSafeArea()
  Node()
}

上述代码的实现效果是按钮部分侵入状态栏区域，但和苹果照片App的预期效果有差异。

以下是几种不同的实现方案：

方案一：UIKit独立窗口叠加（SwiftUI混合实现） #

• 核心思路：创建一个层级高于状态栏的独立UIWindow，在其中嵌入SwiftUI按钮视图，精准控制按钮在状态栏区域的显示，不干扰主视图的安全区域布局。

import SwiftUI

class StatusBarButtonWindow: UIWindow {
    static let shared = StatusBarButtonWindow()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        windowLevel = .statusBar + 1
        backgroundColor = .clear
        rootViewController = UIHostingController(rootView: StatusBarAddButton())
        isHidden = false
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

struct StatusBarAddButton: View {
    var body: some View {
        HStack {
            Button(action: {
                print("添加项目按钮被点击")
            }) {
                Label("添加项目", systemImage: "plus")
                    .foregroundColor(.white)
                    .padding(.leading, 16)
                    .padding(.top, 8)
            }
            Spacer()
        }
    }
}

// 启动时初始化窗口
@main
struct YourApp: App {
    init() {
        StatusBarButtonWindow.shared.frame = UIApplication.shared.windows.first?.frame ?? .zero
    }
    
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

方案二：自定义状态栏高度的顶部栏 #

• 核心思路：直接创建一个高度与状态栏一致的顶部容器，将按钮放置其中，和主内容视图拼接，模拟苹果照片App的布局逻辑，无需修改安全区域。

struct ContentView: View {
    var body: some View {
        VStack(spacing: 0) {
            // 状态栏区域的按钮栏
            HStack {
                Button(action: addItem) {
                    Label("添加项目", systemImage: "plus")
                }
                .padding(.leading, 16)
                Spacer()
            }
            .frame(height: UIApplication.shared.statusBarFrame.height)
            .background(Color(.systemBackground))
            
            // 主内容视图
            Node()
        }
    }
    
    func addItem() {
        // 按钮点击逻辑
    }
}

方案三：SwiftUI叠加层精准定位 #

• 核心思路：在主视图上方叠加一个覆盖状态栏区域的视图，通过frame和padding精准控制按钮位置，不改变主视图的原有布局结构。

struct ContentView: View {
    var body: some View {
        Node()
            .overlay(alignment: .topLeading) {
                Button(action: addItem) {
                    Label("添加项目", systemImage: "plus")
                        .foregroundColor(.primary)
                }
                .padding(.leading, 16)
                .padding(.top, UIApplication.shared.statusBarFrame.height / 2)
                .frame(
                    width: UIScreen.main.bounds.width,
                    height: UIApplication.shared.statusBarFrame.height
                )
                .background(Color(.systemBackground))
            }
    }
    
    func addItem() {
        // 按钮点击逻辑
    }
}

内容的提问来源于stack exchange，提问作者NareHase-Developer