製作分隔線的 SwiftUI Divider

SwiftUI 有個專門製造分隔線的 divider，之前彼得潘一直冷落它，覺得它沒什麼用，直到最近看到 SwiftUI Masterclass 教學影片設計的以下畫面，才發現它也滿不錯的，很適合用來將畫面分割為多個區塊。

https://www.udemy.com/course/swiftui-masterclass-course-ios-development-with-swift/

接下來我們就以作家葉揚的書為例子， 利用 Divider 來分隔葉揚的作品集吧。

Divider | Apple Developer Documentation

水平的 Divider

Divider 可以水平也可以垂直，當它獨立存在時，預設是水平的。

struct ContentView: View {
    var body: some View {
        Divider()
    }
}

當它包在 VStack 裡，它將用來分隔上下排列的元件，因此將成為水平的分隔線。

struct ContentView: View {
    var body: some View {
        VStack {
            Image(.book1)
                .resizable()
                .scaledToFit()
                .frame(width: 180, height: 180)
            
            Divider()
            
            Image(.book2)
                .resizable()
                .scaledToFit()
                .frame(width: 180, height: 180)
            
            Divider()
        }
    }
}

垂直的 Divider

當它包在 HStack 裡，它將用來分隔水平排列的元件，因此將成為垂直的分隔線。

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Image(.book1)
                    .resizable()
                    .scaledToFit()
                    .frame(width: 180, height: 180)
                
                Divider()
                
                Image(.book2)
                    .resizable()
                    .scaledToFit()
                    .frame(width: 180, height: 180)
                
            }
            
            Divider()
            
            HStack {
                Image(.book3)
                    .resizable()
                    .scaledToFit()
                    .frame(width: 180, height: 180)
                
                Divider()
                
                Image(.book4)
                    .resizable()
                    .scaledToFit()
                    .frame(width: 180, height: 180)
                
            }
            
            Divider()
            
        }
    }
    
}

微調細節

針對剛剛的畫面，我們也可以微調一些細節。

• 水平 & 垂直分隔線交叉的地方不要有間隔。

將 VStack 的 spacing 設為 0。

VStack(spacing: 0) {

• 讓水平分隔線跟螢幕邊界有間距。

加上 padding。

• 用 ScrollView 包裝整個 VStack。

讓畫面可以 scroll，容納更多書。

struct ContentView: View {
    
    var body: some View {
        ScrollView {
            VStack(spacing: 0) {
                HStack {
                    Image(.book1)
                        .resizable()
                        .scaledToFit()
                        .frame(width: 180, height: 180)
                        .padding(.vertical, 10)

                    Divider()
                    
                    Image(.book2)
                        .resizable()
                        .scaledToFit()
                        .frame(width: 180, height: 180)
                        .padding(.vertical, 10)

                }
              
                
                Divider()
                
                HStack {
                    Image(.book3)
                        .resizable()
                        .scaledToFit()
                        .frame(width: 180, height: 180)
                        .padding(.vertical, 10)
                    
                    Divider()
                    
                    Image(.book4)
                        .resizable()
                        .scaledToFit()
                        .frame(width: 180, height: 180)
                        .padding(.vertical, 10)
                    
                }
                
                Divider()
                
            }
            .padding()
        }
    }
}