Мы будем использовать приведенные ниже образцы данных для нашего проекта. Добавьте файл JSON в проект Xcode.

Создать модель

Создайте структуру Employee, в которой хранится вся информация о сотрудниках, которую приложение должно отображать.

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

Мы использовали протокол Codable для кодирования и декодирования пользовательских форматов данных, таких как JSON, в собственные объекты Swift.

Загрузить данные

Создайте файл Swift, Data.swift, который импортирует массив данных о сотрудниках из employee.json.

Создать представление строки

Создайте новое представление SwiftUI с именем EmployeeRow.swift.

  • Сохраненное свойство employee.
  • Структура с именем EmployeeRow соответствует протоколу View и описывает содержимое и макет представления в свойстве body.
  • HStack, чтобы расположить виды в контейнере по горизонтали.
  • CircleImage - это настраиваемое представление SwiftUI, в котором изображение обрезается по кругу и добавляется обводка и тень. Нам нужно передать имя изображения и размер кадра. Ознакомьтесь с сутью просмотра CircleImage SwiftUI.
  • Text , чтобы показать имя сотрудника.
  • Spacer для добавления гибкого пространства, которое расширяется вдоль главной оси компоновки содержащего его стека или по обеим осям, если оно не содержится в стеке. Spacer в HStack «подталкивает» текст к переднему краю.
  • Укажите рамку строки с помощью модификатора рамки.
  • Структура с именем ContentView_Previews соответствует протоколу PreviewProvider и объявляет предварительный просмотр для этого представления.
  • EmployeeRow структура вызывается с некоторыми данными для предварительного просмотра.
  • Модификатор previewLayout(_:) для установки размера, приблизительно равного строке в списке.

Создать список

Создайте новое представление SwiftUI с именем EmployeeList.swift.

  • Передайте employeeData инициализатору List.
  • Верните EmployeeRow из закрытия, чтобы завершить динамически сгенерированный список. Это создает по одному EmployeeRow для каждого элемента в массиве employeeData.

В SceneDelegate.swift переключите корневое представление приложения на EmployeeList.

Создать подробный вид

Создайте новое представление SwiftUI с именем EmployeeDetail.swift.

  • Вид Divider разделяет окружающие виды путем рисования линии.
  • Модификатор navigationBarTitle настраивает заголовок панели навигации для представления.

Навигация между списком и подробностями

  • В EmployeeList.swift вставьте список сотрудников в NavigationView.
  • Внутри закрытия списка оберните возвращаемую строку в NavigationLink, указав EmployeeDetail в качестве места назначения.

Создайте и запустите проект!

Обратитесь к полному проекту Xcode на GitHub.

Спасибо. Удачного кодирования!