詳解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中雖然簡單可是很是的經常使用，咱們必定要熟悉。若是你有任何的問題、建議均可以經過微博或郵件聯繫到我本人。