Поваренная книга SwiftUI: списки и навигация — Часть 1

Создание List в SwiftUI

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

Чтобы создать базовый список в SwiftUI, вы используете представление List, предоставляя ему набор представлений содержимого:

struct ContentView: View {
  var body: some View {
    List {
      Text("Item 1")
      Text("Item 2")
      Text("Item 3")
    }
  }
}

Предварительный просмотр должен быть таким:

Простой список в SwiftUI.

Этот сниппет создает список с тремя статическими элементами. Каждый элемент занимает всю ширину экрана и имеет вид строки по умолчанию.

Для создания более динамичных и гибких списков, например, заполненных данными из массива, SwiftUI предлагает представление ForEach. ForEach в сочетании сList позволяет создавать пользовательское представление для каждой строки списка:

struct ContentView: View {
  let scientists = ["Albert Einstein", "Isaac Newton", "Marie Curie", "Charles Darwin", "Nikola Tesla"]

  var body: some View {
    List(scientists, id: \.self) { scientist in
      Text(scientist)
    }
  }
}

Вот как должен выглядеть ваш предварительный просмотр:

Динамический список с использованием ForEach в SwiftUI.

Обратите внимание, что в предыдущем примере ForEach используется неявно через инициализатор List, который принимает коллекцию и замыкание содержимого. Если бы вы хотели использовать ForEach в явном виде, вы могли бы написать его следующим образом:

List {
  ForEach(scientists, id: \.self) { scientist in
    Text(scientist)
  }
}

Использование NavigationLink для выбранной строк

Для интерактивных списков, в которых строки можно выбирать, SwiftUI предоставляет представление NavigationLink. Обернув каждую строку в NavigationLink, в сочетании с navigationDestination, вы позволяете пользователю выбрать строку и перейти к новому экрану.

struct ScientistDetailView: View {
  let name: String

  var body: some View {
    VStack {
      Text(name)
        .font(.title)
        .padding()
      Text("More details about \(name) would be presented here.")
        .font(.body)
        .foregroundColor(.gray)
    }
    .navigationTitle(name)
  }
}

struct ContentView: View {
  let scientists = ["Albert Einstein", "Isaac Newton", "Marie Curie", "Charles Darwin", "Nikola Tesla"]

  var body: some View {
    NavigationStack {
      List(scientists, id: \.self) { scientist in
        NavigationLink(scientist, value: scientist)
      }
      .navigationDestination(for: String.self) { scientistName in
        ScientistDetailView(name: scientistName)
      }
    }
  }
}

Нажмите на строку Marie Curie и вы получите такой вид в предварительном просмотре:

Динамический список с использованием NavigationLink в SwiftUI.

В приведенном выше примере мы используем NavigationStack для перехода от списка к детальному представлению на основе выбранного ученого. Когда пользователь выбирает строку, он переходит к виду ScientistDetailView, указанному в NavigationLink. Мы используем модификатор navigationDestination, чтобы связать тип данных String (представляющий имя ученого) с целевым представлением (ScientistDetailView).

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

Настройка строк списка в SwiftUI

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

Чтобы персонализировать внешний вид строк списка, вы используете модификатор listRowBackground. Этот модификатор принимает представление, которое затем становится фоном строки, что позволяет создавать различные визуальные конструкции.

Рассмотрим простой список имен:

struct ContentView: View {
  let names = ["Alice", "Bob", "Charlie", "Dave"]

  var body: some View {
    List(names, id: \.self) { name in
      Text(name)
    }
  }
}

По умолчанию эти строки имеют обычный белый фон. Однако, допустим, вы хотите, чтобы фон был зеленым. Добейтесь этого с помощью модификатора listRowBackground:

struct ContentView: View {
  let names = ["Alice", "Bob", "Charlie", "Dave"]

  var body: some View {
    List(names, id: \.self) { name in
      Text(name)
        .listRowBackground(Color.green)
    }
  }
}

Вот как должен выглядеть ваш предварительный просмотр:

Список, в котором строки имеют зеленый фо.

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

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

Например, вы можете создать градиентный фон:

struct ContentView: View {
  let names = ["Alice", "Bob", "Charlie", "Dave"]

  var body: some View {
    List(names, id: \.self) { name in
      Text(name)
        .listRowBackground(
          LinearGradient(gradient: Gradient(colors: [.blue, .purple]),
                         startPoint: .leading,
                         endPoint: .trailing)
        )
    }
  }

Список, в котором строки имеют градиентный фон.

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

Добавление навигации в список

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

Чтобы добавить навигацию в список в SwiftUI, список должен быть встроен в NavigationStack. Ниже мы создадим простой пример, в котором мы переходим от списка парков к детальному представлению каждого парка.

struct Park: Hashable {
  let name: String
  let imageName: String
  let description: String
}

extension Park: Identifiable {
  var id: String { name }
}

struct ContentView: View {
  @State private var presentedParks: [Park] = []

  var parks: [Park] {
    [
      Park(name: "Yosemite", imageName: "yosemite", description: "Yosemite National Park"),
      Park(name: "Sequoia", imageName: "sequoia", description: "Sequoia National Park"),
      Park(name: "Point Reyes", imageName: "point_reyes", description: "Point Reyes National Seashore")
    ]
  }

  var body: some View {
    NavigationStack(path: $presentedParks) {
      List(parks) { park in
        NavigationLink(park.name, value: park)
      }
      .navigationDestination(for: Park.self) { park in
        ParkDetailsView(park: park)
      }
    }
  }
}

struct ParkDetailsView: View {
  let park: Park

  var body: some View {
    VStack {
      Image(park.imageName)
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: 200, height: 200)
      Text(park.name)
        .font(.title)
        .foregroundColor(.primary)
      Text(park.description)
        .font(.body)
        .foregroundColor(.secondary)
    }
    .padding()
  }
}

Выберите Yosemite, и тогда ваш предварительный просмотр должен выглядеть так:

Список в NavigationStack в SwiftUI.

В этом примере мы определили структуру Park, ParkDetailsView для отображения подробностей о выбранном парке и List с парками в NavigationStack. При выборе парка в списке приложение переходит к ParkDetailsView для выбранного парка.

Не забудьте обеспечить пользователям понятную и интуитивную навигацию. С помощью мощных инструментов SwiftUI вы можете настроить панель навигации и добавить необходимые кнопки. Изучите документацию и творчески подойдите к разработке!

Источник

← Поваренная книга SwiftUI: кнопки — Часть 2