详解SwiftUI中Divider和Spacer的用法和区别（最新）

Posted 2021-10-05 iOS开发栈

Divider和Spacer都可以用到分割两个视图，但是它们也有一些区别。通过这篇文章我们将学到这两个控件的使用方式和它们之间的区别。

到公众号【ios开发栈】学习更多SwiftUI、iOS开发相关内容。

Spacer

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Top").background(Color.red)
            Spacer()
            Text("Bottom").background(Color.red)
        }
        .frame(width: 100, height: 400, alignment: .center)
        .background(Color.yellow)
    }
}

在“Top”和“Bottom”之间添加一个Spacer控件，会把这两个文字隔开，使这两个文字分别位于最上和最下面。

Spacer(minLength: 30)

通过设置minLength可以指定被分开的两个视图的最小距离，如果不指定的话，会有一个默认的距离。

Divider

VStack {
    Text("Top").background(Color.red)
    Divider().background(Color.red)
    Text("Bottom").background(Color.red)
}

Top和Bottom之间添加一个Divider控件可以在两个视图之间添加一个间隔，和上面的Spacer不同的是中间会出现一根线，background设置的颜色会影响到这根线的颜色。

并且，被Divider分割的两个视图中间的距离是固定的，它们不会移动到父视图的两端。

另外，把Divider的高度分别设置为0之后，被它分割的两个视图不会靠在一起。但是把Spacer的高度设置为0，被它分割的两个视图会靠在一起，就和没有被分割一样。

到公众号【iOS开发栈】学习更多SwiftUI、iOS开发相关内容。

总结

这篇文章学习了SwiftUI中Spacer和Divider的用法以及它们之间的区别，这两个控件在SwiftUI中虽然简单但是非常的常用，我们一定要熟悉。如果你有任何的问题、建议都可以通过微博或邮件联系到我本人。