跳到主要内容

SwiftUI 中的内容边距

· 阅读需 5 分钟

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 上看起来很奇怪,因为它将所有文本放在前缘,而屏幕中央是空的。

content-margins

在使用 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 上的内容移到了中心。但是,如你所见,这也将滚动条指示器从后缘移到了中心。

content-margins

我们需要一种方法来区分视图的内容和工具栏,并且仅移动内容,同时将工具栏保留在相同的位置。幸运的是,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 视图修饰符仅将可滚动内容从安全区域移开。但它将滚动条保留在视图的后缘。

content-margins

contentMargins 视图修饰符接受几个参数,允许我们调整其行为。第一个参数是我们想要移动的边缘。它可能是 leadingtrailingtophorizontalvertical 或一次 all。第二个参数是我们想要移动的空间量。第三个参数是 ContentMarginPlacement 类型的实例,它允许我们指定我们想要移动的位置。例如,它可能是我们示例中所做的 scrollContent。另一个选项是 scrollIndicators,它仅移动指示器。

今天,我们学习了新的 contentMargins 视图修饰符。它是安全区域管理中一个至关重要的部分,以前在 SwiftUI 中没有。最后,我们有办法对其进行管理,并使我们的应用程序更易于访问和适应不同的屏幕尺寸。我希望你喜欢这篇文章。欢迎在 Twitter 上关注我,并提出与本文相关的问题。感谢阅读,我们下周见!