乐趣区

关于ios:详解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 中 SpacerDivider的用法以及它们之间的区别,这两个控件在 SwiftUI 中尽管简略然而十分的罕用,咱们肯定要相熟。如果你有任何的问题、倡议都能够通过微博或邮件分割到我自己。

退出移动版