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 中内容边距的管理技巧。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
腾讯云开发者
