SwiftUI: ViewModifier는 무엇입니까?

SwiftUI는 iOS 앱을 만들기 위한 인기 있는 선택이 되고 있으며 가장 일반적으로 사용하는 것 중 하나는 ViewModifiers입니다. 이 글을 읽기 전에 SwiftUI로 작업한 적이 있고 ViewModifiers가 무엇인지 모른다면 이전에 그것을 깨닫지 못한 채 사용해 본 적이 있을 것입니다.

ViewModifiers는 모양과 동작을 사용자 지정하기 위해 앱에서 사용하는 보기에서 호출하는 메서드입니다. 색상과 크기를 변경하고, 제스처를 추가하고, 뷰에 접근성 옵션 등을 추가하는 데 사용합니다. 사용한 적이 있거나 프로젝트에서 사용한 경우 .backgroundViewModifiers .foregroundColor의 예입니다.

ViewModifier를 어떻게 사용합니까?

프로젝트를 생성하는 것부터 시작하겠습니다. 전체 프로세스에 대해 지루하지 않을 것이므로 프로젝트를 만들 때 Storyboard 대신 SwiftUI를 선택하십시오.

생성된 기본 보기는 이미 일부 수정자를 사용하므로 이를 살펴보겠습니다.

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
    }
}

• .padding: 보기에 대한 패딩을 지정할 수 있습니다. 값을 제공하지 않기 때문에 모든 측면에 대해 시스템 기본 패딩을 적용합니다. 예를 들어 .padding(.top, 12)이와 같이 가장자리와 값을 지정할 수 있습니다..padding(.horizontal, 12)
• .foregroundColor: 보기의 전경색을 설정하여 텍스트 색상, 색조 등에 영향을 줍니다.

• .frame: View의 크기를 변경할 때 사용
• .font: a의 글꼴 모음, 크기 등을 변경하는 데 사용됩니다.Text

시작하기 전에 패딩, 모서리 반경, 배경색 등 버튼에 사용하려는 제약 조건을 검토해 보겠습니다.

일부 텍스트가 포함된 간단한 버튼을 추가하여 시작해 보겠습니다.

Button(action: {
    // On click
}) {
    Text("Label")
}

수정자를 추가한 후:

Button(action: {
    // On click
}) {
    Text("Label")
        .padding(.horizontal, 20)
        .padding(.vertical, 14)
        .foregroundColor(Color.white)
}
.background(Color.blue)
.cornerRadius(14)

      
                

                    
                    
                
            

위의 예는 매우 간단하지만 프로젝트에 유사한 스타일(공통 패딩 값, 테마 배경 색상 등)을 가진 많은 뷰가 있는 경우 동일한 수정자를 반복해야 하는 것이 매우 빠르게 매우 성가실 수 있습니다. 다행스럽게도 SwiftUI를 사용하면 사용자 지정 수정자를 만들 수 있습니다.

버튼 텍스트가 우리가 만들려고 했던 것과 정확히 일치하지 않는 경우 위의 예를 살펴보겠습니다. 버튼 텍스트에 대한 사용자 지정 수정자를 만들 수 있습니다.

struct ButtonTextModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.system(size: 17, weight: .semibold))
            .lineSpacing(22)
    }
}

Text("Label")
  .padding(.horizontal, 20)
  .padding(.vertical, 14)
  .foregroundColor(Color.white)
  .modifier(ButtonTextModifier())

      
                

                    
                    
                
            

extension View {
    func buttonText() -> some View {
        modifier(ButtonTextModifier())
    }
}

Text("Label")
  .padding(.horizontal, 20)
  .padding(.vertical, 14)
  .foregroundColor(Color.white)
  .buttonText()