Поваренная книга SwiftUI: cоздание и предварительный просмотр представления SwiftUI

SwiftUI Cookbook — это справочник по общим шаблонам создания пользовательских интерфейсов в SwiftUI, к которым можно быстро обращаться в процессе разработки.

Начало работы с SwiftUI

Добро пожаловать в раздел «Начало работы с SwiftUI»! Здесь начинается ваш путь к тому, чтобы стать мастером SwiftUI.

Мы начнем с основ, изучим, как создать и просмотреть представление SwiftUI. Затем мы погрузимся в основополагающую концепцию SwiftUI — представления (View) и и их иерархия, где вы поймете структуру SwiftUI-приложений и то, как представления располагаются слоями.

Затем мы перейдем к использованию предварительных просмотров Xcode с SwiftUI — фантастической функции, позволяющей видеть изменения в коде в режиме реального времени.

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

Мы также рассмотрим более сложные представления, такие как NavigationStack, List View и Form, которые откроют широкие возможности для интерфейсов ваших приложений.

К концу этого раздела вы получите прочную основу и будете готовы к изучению более сложных тем. Итак, давайте сразу же приступим к работе!

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

SwiftUI — это современный фреймворк Apple, позволяющий создавать красивые, отзывчивые пользовательские интерфейсы для iOS, macOS, watchOS и tvOS с использованием декларативного синтаксиса, который легко читать и поддерживать. С помощью SwiftUI можно создать представление (view) SwiftUI, легкий и «ленивый» UI-компонент, используя простой код, а не массивные сториборды или XIB-файлы, как в традиционной iOS-разработке.

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

Откройте Xcode и создайте новый проект, используя шаблон App. Назовите проект и убедитесь, что для параметра Interface установлено значение SwiftUI (по умолчанию).

Откройте файл ContentView.swift и замените его содержимое на следующее:

import SwiftUI

struct ContentView: View {
  var body: some View {
    Text("Hello, SwiftUI!")
  }
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

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

Как это работает

Рассмотрим этот код построчно.

import SwiftUI

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

struct ContentView: View {

В этой строке определяется новая структура с именем ContentView. В SwiftUI экраны представляются в виде структур, соответствующих протоколу View. ContentView — это структура, соответствующая протоколу View.

var body: some View {

Эта строка определяет вычисляемое свойство body, которое можно рассматривать как многократно используемый компонент. some View указывает, что body будет выводить нечто, что квалифицируется как View. Однако здесь не указывается, что именно будет в View. Детали представления определяются в коде, который следует за этой строкой.

Text("Hello, SwiftUI!")

Эта строка создает новое представление Text, содержимым которого является строка «Hello, SwiftUI!». В SwiftUI представление Text — это компонент, отображающий на экране строку текста.

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

Этот код определяет структуру PreviewProvider для представления ContentView в SwiftUI. Свойство previews структуры PreviewProvider возвращает экземпляр представления ContentView, который используется для предварительного просмотра внешнего вида и поведения представления в редакторе Xcode Canvas без необходимости запуска приложения в симуляторе.

Итак, если собрать все вместе, то в коде определяется новая структура ContentView, соответствующая протоколу View. Свойство body структуры ContentView возвращает представление Text, которое выводит на экран строку «Hello, SwiftUI!». Наконец, код устанавливает предварительный просмотр ContentView в редакторе Canvas в Xcode.

Поздравляем! Вы только что создали свое первое представление SwiftUI и смогли просмотреть его в Xcode. Далее мы научимся создавать более сложные представления и иерархии SwiftUI.

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

Источник