SwiftUI Divider与Spacer的奇妙世界

2023-10-25 21:46:24

SwiftUI中的分割线：Divider

Divider 控件是一个简单的线条，用于在两个视图之间创建一条分隔线。它非常适合用于将不同部分或元素的内容隔开，以提高界面的可读性和组织性。

Divider 的用法非常简单，您只需在需要添加分隔线的位置插入 Divider() 即可。例如，以下代码会在两个文本视图之间添加一条分隔线：

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Top")
            Divider()
            Text("Bottom")
        }
    }
}

Divider 还支持自定义样式，您可以通过 modifier 来设置分隔线の色やスタイル。例如，以下代码会创建一个带有红色分隔线的文本视图：

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Top")
            Divider().foregroundColor(.red)
            Text("Bottom")
        }
    }
}

SwiftUI中的间隔控件：Spacer

Spacer 控件是一个无形的视图，用于在两个视图之间创建间距。它非常适合用于调整视图之间的距离，以实现更平衡或更美观的布局。

Spacer 的用法也十分简单，您只需在需要添加间距的位置插入 Spacer() 即可。例如，以下代码会在两个文本视图之间添加一个间距，使这两个文本分别位于最上和最下面：

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Top")
            Spacer()
            Text("Bottom")
        }
    }
}

Spacer 还支持设置最小和最大间距。例如，以下代码会创建一个最小间距为 20 的 Spacer：

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Top")
            Spacer(minLength: 20)
            Text("Bottom")
        }
    }
}