swiftui - 确定填充以将 Button 正确放置在顶部尾角？

Question

在隐藏状态栏的应用程序中，SwiftUI 中是否有一些东西可以帮助将按钮正确放置在顶部尾角？

它看起来正确所需的填充似乎取决于设备类型（显示器的有或没有缺口/“角半径”随设备尺寸而变化）。隐藏状态栏的顶部将没有安全区域插图。

如何确定此类按钮的正确填充？有没有比检查特定设备类型/屏幕尺寸更好的方法？

示例代码：

// SwiftUIPlayground
// https://github.com/ralfebert/SwiftUIPlayground/

import Foundation
import SwiftUI

struct CloseButtonExampleView: View {

    var body: some View {
        Color.yellow
            .ignoresSafeArea()
            .overlay(self.closeButton, alignment: .topTrailing)
    }

    @ViewBuilder var closeButton: some View {
        Button(
            action: {},
            label: {
                ZStack {
                    Circle()
                        .foregroundColor(.green)
                        .frame(width: 30, height: 30)
                    Image(systemName: "xmark")
                        .foregroundColor(.white)
                }
            }
        )
        .padding(16) // <-- what's the correct value?
    }

}

struct CloseButtonExampleView_Previews: PreviewProvider {

    static var previewView: some View {
        CloseButtonExampleView()
    }

    static var previews: some View {
        previewView
            .previewDevice(PreviewDevice(rawValue: "iPhone SE (2nd generation)"))
        previewView
            .previewDevice(PreviewDevice(rawValue: "iPhone 12"))
        previewView
            .previewDevice(PreviewDevice(rawValue: "iPhone 12 Pro Max"))
    }
}

标签： swiftui

Answer 1

我认为正确的根本不是硬编码任何值，所以只需使用

@ViewBuilder var closeButton: some View {
    Button(

       // .. other code here
    )
    .padding()         // << default !!
    .ignoresSafeArea() // << !!
}

给出（用 Xcode 12.5 / iOS 14.5 测试）