NotchMyProblem 使用教程-优快云博客

NotchMyProblem 使用教程

NotchMyProblem A small Swift package that positions buttons around the iPhone's notch or Dynamic Island. It provides a simple view component that automatically detects your device's top cutout and places buttons on either side of it, handling all the spacing and alignment details for you. 项目地址: https://gitcode.com/gh_mirrors/no/NotchMyProblem

1. 项目介绍

NotchMyProblem 是一个轻量级的 Swift 包，旨在简化在 iPhone 设备上围绕凹口（Notch）或动态岛（Dynamic Island）布局 UI 元素的过程。它能够自动检测设备顶部的凹口或动态岛，并帮助开发者创建适应性强、无需手动调整位置的布局。

2. 项目快速启动

要开始使用 NotchMyProblem，您需要通过 Swift 包管理器将其添加到您的项目中。

添加项目依赖

打开 Xcode，执行以下步骤：

转到 File > Add Packages...
输入仓库 URL：https://github.com/Aeastr/NotchMyProblem
点击 Add Package

基本使用示例

在您的 Swift UI 视图结构中使用 TopologyButtonsView 来自动布局按钮：

import SwiftUI
import NotchMyProblem

struct MyView: View {
    var body: some View {
        ZStack {
            // 在这里放置您的主要内容
            // 自动围绕凹口/动态岛布局的按钮
            TopologyButtonsView(
                leadingButton: {
                    Button(action: {
                        print("Left button tapped")
                    }) {
                        Image(systemName: "gear")
                    }
                },
                trailingButton: {
                    Button(action: {
                        print("Right button tapped")
                    }) {
                        Text("Save")
                    }
                }
            )
        }
    }
}

上述代码将自动：

在兼容设备上，将按钮放置在凹口/动态岛的两侧
在没有凹口的设备上，回退到标准的左/右布局
根据特定设备型号调整间距

3. 应用案例和最佳实践

自定义覆盖以解决 API 不准确问题

某些设备通过 API 报告的凹口尺寸不正确。可以通过自定义覆盖来修正这些值，确保在不同设备上一致的用户界面。

// 在您的应用初始化时
NotchMyProblem.globalOverrides = [
    .series(prefix: "iPhone13", scale: 0.95, heightFactor: 1.0, radius: 27),
    DeviceOverride(modelIdentifier: "iPhone14,3", scale: 0.8, heightFactor: 0.7)
]

视图特定覆盖

您还可以为特定视图使用 .notchOverride() 修饰符来自定义覆盖。

TopologyButtonsView(
    leadingButton: {
        /* ... */
    },
    trailingButton: {
        /* ... */
    }
)
.notchOverride(
    .series(prefix: "iPhone14", scale: 0.6, heightFactor: 0.6)
)