SwiftUI: что такое ViewModifier?

SwiftUI быстро становится популярным выбором для создания приложений для iOS, и одна из самых распространенных вещей, которые вы используете, — ViewModifiers. Если вы работали со SwiftUI до того, как прочитали это, и не знаете, что такое ViewModifiers, я гарантирую, что вы использовали их раньше, не осознавая этого.

ViewModifiers — это методы, которые вы вызываете для представлений, используемых в вашем приложении, для настройки их внешнего вида и поведения. Вы используете их для изменения цветов и размеров, добавления жестов, добавления опций доступности и т. д. к вашим представлениям, если вы когда-либо использовали .backgroundили использовали .foregroundColorв своем проекте, это примеры ViewModifiers.

Как вы используете ViewModifiers?

Давайте начнем с создания проекта, я не буду утомлять вас всем процессом, поэтому просто убедитесь, что вы выбрали SwiftUI вместо Storyboard при создании своего проекта.

Представление по умолчанию, созданное для вас, уже использует некоторые модификаторы, поэтому давайте взглянем на это.

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: используется для изменения размера представления.
• .font: используется для изменения семейства шрифтов, размера и т. д.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()