SwiftUI 中的内容边距
SwiftUI 引入了一组视图修饰符，允许我们高效地管理视图中的安全区域。在许多情况下，安全区域是你希望放置内容的地方。今天，我们将了解 SwiftUI 引入的新内容边距概念，以及它与安全区域有何不同。
让我们从一个简单的示例开始，演示包含一百个项目的列表。
struct ContentView: View {
var body: some View {
NavigationStack {
List {
ForEach(1..<100) { index in
Text("Item \(index)")
}
}
.font(.title)
.navigationTitle("Item list")
}
}
}
如你所见，在上面的示例中，我们在里面放置了一个带有许多 Text 视图的 List 视图。在 iPhone 上看起来可能很棒，但它在 iPad 上看起来很奇怪，因为它将所有文本放在前缘，而屏幕中央是空的。
在使用 UIKit 时，我们可以访问 readableContentGuide 布局指南。从字面上看，它是另一个安全区域，可以适应屏幕大小，但仅适用于你的文本内容。不幸的是，我们无法在 SwiftUI 中访问 readableContentGuide。
要了解有关在 SwiftUI 中管理安全区域的更多信息，请查看我的 “在 SwiftUI 中管理安全区域” 文章。
我们可以通过在 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("Item list")
.safeAreaPadding(.horizontal, sizeClass == .regular ? 200 : 0)
}
}
}
我们通过使用 horizontalSizeClass 环境值和 safeAreaPadding 视图修饰符，将 iPad 上的内容移到了中心。但是，如你所见，这也将滚动条指示器从后缘移到了中心。
我们需要一种方法来区分视图的内容和工具栏，并且仅移动内容，同时将工具栏保留在相同的位置。幸运的是，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("Item list")
.contentMargins(
.horizontal,
sizeClass == .regular ? 200 : 0,
for: .scrollContent
)
}
}
}
如你所见，在上面的示例中，我们使用 contentMargins 视图修饰符仅将可滚动内容从安全区域移开。但它将滚动条保留在视图的后缘。
contentMargins 视图修饰符接受几个参数，允许我们调整其行为。第一个参数是我们想要移动的边缘。它可能是 leading、trailing、top、horizontal、vertical 或一次 all。第二个参数是我们想要移动的空间量。第三个参数是 ContentMarginPlacement 类型的实例，它允许我们指定我们想要移动的位置。例如，它可能是我们示例中所做的 scrollContent。另一个选项是 scrollIndicators，它仅移动指示器。
今天，我们学习了新的 contentMargins 视图修饰符。它是安全区域管理中一个至关重要的部分，以前在 SwiftUI 中没有。最 后，我们有办法对其进行管理，并使我们的应用程序更易于访问和适应不同的屏幕尺寸。我希望你喜欢这篇文章。欢迎在 Twitter 上关注我，并提出与本文相关的问题。感谢阅读，我们下周见！