Поваренная книга SwiftUI: создание View и его модификаторов

Одним из основных понятий в SwiftUI является представление (View). Представления — это, по сути, строительные блоки, из которых состоит пользовательский интерфейс. Они могут включать в себя кнопки, текст, изображения и многое другое. В этой статье руководства мы рассмотрим шаги по созданию нового представления в SwiftUI.

Чтобы создать представление, начните с создания нового файла SwiftUI. В Xcode перейдите в меню File ▸ New ▸ File (или воспользуйтесь сочетанием клавиш Command-N), выберите в меню шаблонов пункт SwiftUI View, а затем нажмите кнопку Next.

Шаблон представления SwiftUI.

Назовите новый файл MyView.swift и нажмите кнопку Create. Xcode сгенерирует начальный код для вашего нового представления.

Начальный код будет выглядеть примерно так:

import SwiftUI

struct MyView: View {
  var body: some View {
    Text("Hello, World!")
  }
}

struct MyView_Previews: PreviewProvider {
  static var previews: some View {
    MyView()
  }
}

Xcode также должен автоматически показать предварительный просмотр вашего представления, который выглядит следующим образом:

Предварительный просмотр представления SwiftUI.

В этом коде определена новая структура MyView, соответствующая протоколу View. Свойство body структуры MyView возвращает представление Text, которое отображает строку «Hello, World!».

Примечание: Если у вас не отображается предварительный просмотр, выберите Editor ▸ Canvas или выберите Canvas в кнопке Adjust Editor Options на правой стороне панели инструментов Xcode.

Теперь, когда основной код получен, мы можем настроить вид по своему усмотрению. В данном примере можно изменить текст, чтобы отобразить приветствие для пользователей:

struct MyView: View {
  var body: some View {
    Text("Welcome to my amazing app!")
  }
}

Через несколько секунд предварительный просмотр справа автоматически обновится и покажет новый текст.

Настройка View с помощью модификаторов

Вы также можете настроить внешний вид текста, применив модификаторы представлений. Модификаторы представлений (View modifiers) — это специальные методы или функции, предоставляемые SwiftUI и позволяющие изменять свойства и поведение представлений. Они обеспечивают удобный способ внесения изменений в представления, не прибегая к созданию подклассов или отдельных стилей для каждого варианта.

Модификаторы представлений можно применять, цепляя их к экземпляру представления с помощью точечной нотации. Каждый модификатор применяется в порядке следования, что позволяет комбинировать несколько модификаторов для достижения нужного эффекта. Например, размер и цвет шрифта можно изменить следующим образом:

struct MyView: View {
  var body: some View {
    Text("Welcome to my amazing app!")
      .font(.title)
      .foregroundColor(.blue)
  }
}

Теперь предварительный просмотр должен выглядеть следующим образом:

Модификаторы представления SwiftUI.

В этом обновленном коде модификатор .font() устанавливает размер шрифта в соответствии со стилем заголовка, а модификатор .foregroundColor() изменяет цвет текста на синий.

Это лишь некоторые из множества модификаторов представления, которые можно применить к представлениям SwiftUI. В остальных статья этого раздела будут рассмотрены некоторые другие способы использования модификаторов представления для настройки внешнего вида представлений.

Предложите исправление: выделите текст и нажмите Ctrl+ Enter

← Предыдущая статья: Формы

Источник