The Util Designer
SwiftUI 用View extend 方式把自定議樣式打包並重用的方法
xcode 13.4.1, swift 5.5, iOS 15.4
2022-08-28
在創作App過程之中，有時會發現一些樣式會經常出現，有時出現在Text元件，又有時出現在Button或Label，這次就講講如何把樣式打包再重用在不同的元件上面。
1. 以下我們使用了三個不同類型的元件，分別為Button, Label和Rectangle。
import SwiftUI

struct ReusableView: View {
    var body: some View {
        VStack {
            Button {
                
            } label: {
                Text("Button")
            }
            .padding()
            .foregroundColor(.white)
            .font(.largeTitle)
            .background(
                LinearGradient(gradient: Gradient(colors: [.red, .green, .blue]), startPoint: .leading, endPoint: .trailing)
                )

            Label {
                Text("Label")
            } icon: {
                Image(systemName: "trash")
            }
            .padding()
            .foregroundColor(.white)
            .font(.largeTitle)
            .background(
                LinearGradient(gradient: Gradient(colors: [.red, .green, .blue]), startPoint: .leading, endPoint: .trailing)
                )
            
            Rectangle()
                .padding()
                .foregroundColor(.white)
                .font(.largeTitle)
                .background(
                    LinearGradient(gradient: Gradient(colors: [.red, .green, .blue]), startPoint: .leading, endPoint: .trailing)
                    )
        }
    }
}
2. 三個不同的元件使用了相同的樣式，這樣情況，我們可以把樣式打包，再應用到不同元件中去。以下把樣式用ResuablePresentation來打包，再應用到Button, Label和Rectangle中，使程式更簡潔和可讀性，實作如下：
import SwiftUI


struct ResuablePresentation<ViewContent> : View where ViewContent : View {
    
    var viewContent : () -> ViewContent
    
    var body: some View {
        viewContent()
            .padding()
            .foregroundColor(.white)
            .font(.largeTitle)
            .background(
                LinearGradient(gradient: Gradient(colors: [.red, .green, .blue]), startPoint: .leading, endPoint: .trailing)
                )

    }
}

struct ReusableView: View {
    var body: some View {
        VStack {
            ResuablePresentation {
                Button {
                    
                } label: {
                    Text("Button")
                }

            }

            ResuablePresentation {
                Label {
                    Text("Label")
                } icon: {
                    Image(systemName: "trash")
                }
            }
            
            ResuablePresentation {
                Rectangle()
            }
        }
    }
}