SwiftUI 中的内容边距

前言

SwiftUI 引入了一组视图修饰符，使我们能够有效地管理视图中的安全区域。在许多情况下，安全区域是你希望放置内容的地方。今天，我们将了解 SwiftUI 引入的新内容边距概念以及它与安全区域的区别。

创建示例

让我们从一个简单的示例开始，演示带有一百个项目的列表。

struct ContentView: View {
    var body: some View {
        NavigationStack {
            List {
                ForEach(1..<100) { index in
                    Text("Item \(index)")
                }
            }
            .font(.title)
            .navigationTitle("项目列表")
        }
    }
}

如上例所示，我们将列表视图与一堆文本视图放在一起。在 iPhone 上可能看起来很好，但是在 iPad 上，它看起来非常奇怪，因为它将所有文本放在了前导边缘，并保持屏幕中央为空白。

在使用 UIKit 时，我们可以访问 readableContentGuide 布局指南。从字面上看，它是另一个安全区域，适应屏幕大小，但仅适用于文本内容。不幸的是，我们在 SwiftUI 中无法访问 readableContentGuide。

适配 iPad

我们可以通过增加 iPad 上的安全区域来解决此问题，如下所示：

struct ContentView: View {
    @Environment(\.horizontalSizeClass) private var sizeClass
    
    var body: some View {
        NavigationStack {
            List {
                ForEach(1..<100) { index in
                    Text("Item \(index)")
                }
            }
            .font(.title)
            .navigationTitle("项目列表")
            .safeAreaPadding(.horizontal, sizeClass == .regular ? 200 : 0)
        }
    }
}

我们通过使用 horizontalSizeClass 环境值和 safeAreaPadding 视图修饰符，将内容移动到了 iPad 上的中心。然而，正如你所见，这也将滚动条指示器从后导边缘移到了中心。

使用 contentMargins

我们需要一种区分视图的内容和工具栏，并仅移动内容而保持工具栏在原地的方法。幸运的是，SwiftUI 引入了新的 contentMargins 视图修饰符，使我们能够在视图中移动特定类型的内容。

struct ContentView: View {
    @Environment(\.horizontalSizeClass) private var sizeClass
    
    var body: some View {
        NavigationStack {
            List {
                ForEach(1..<100) { index in
                    Text("Item \(index)")
                }
            }
            .font(.title)
            .navigationTitle("项目列表")
            .contentMargins(
                .horizontal,
                sizeClass == .regular ? 200 : 0,
                for: .scrollContent
            )
        }
    }
}

如上例所示，我们使用 contentMargins 视图修饰符仅将可滚动内容从安全区域移开。但是它将滚动条保留在视图的后导边缘。

contentMargins 视图修饰符接受几个参数，允许我们调整其行为。第一个参数是我们想要移动的边缘。它可以是 leading、trailing、top、horizontal、vertical 或一次性移动所有边缘。第二个参数是我们想要移动的空间量。第三个参数是 ContentMarginPlacement 类型的实例，它允许我们指定我们想要移动的位置。例如，它可以是 scrollContent，正如我们在示例中所做的那样。另一个选项是 scrollIndicators，它仅移动指示器。

可运行 Demo

提供一个基于提供的代码片段的简化版本的Swift Playground示例，用于演示如何使用contentMargins视图修饰符来管理内容边距。以下是示例代码：

import SwiftUI
import PlaygroundSupport

struct ContentView: View {
    @Environment(\.horizontalSizeClass) private var sizeClass
    
    var body: some View {
        NavigationView {
            List {
                ForEach(1..<20) { index in
                    Text("Item \(index)")
                }
            }
            .font(.title)
            .navigationTitle("Item list")
            .contentMargins(
                .horizontal,
                sizeClass == .regular ? 200 : 0,
                for: .scrollContent
            )
        }
    }
}

let viewController = UIHostingController(rootView: ContentView())
PlaygroundPage.current.liveView = viewController

在这个示例中，我们创建了一个简单的列表视图，其中包含 20 个项目。根据水平尺寸类别的不同（正常或紧凑），我们使用 contentMargins 视图修饰符来管理水平方向上的内容边距。在紧凑水平尺寸类别下，我们将内容移动了 200 个点，以便在大屏幕设备上居中显示。你可以在 Playground 中运行此代码以查看结果。

总结

本文介绍了 SwiftUI 中的内容边距管理，通过对比安全区域的概念，解释了内容边距的重要性。文章从创建示例开始，展示了在列表视图中如何处理内容边距的问题。随后，通过介绍 UIKit 中的 readableContentGuide 布局指南以及 SwiftUI 中的 safeAreaPadding 视图修饰符，展示了在 iPad 上适配内容边距的方法。最后，引入了 contentMargins 视图修饰符，并详细解释了其用法和参数，以及如何使用它来管理内容边距。通过本文，读者可以更好地理解并掌握 SwiftUI 中内容边距的管理技巧。