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

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中虽然简单可是很是的经常使用，咱们必定要熟悉。若是你有任何的问题、建议均可以经过微博或邮件联系到我本人。