Представление карточек в списке SwiftUI

Мне нравится, как в приложениях Apple для здоровья и фитнеса представлено представление карточек: в виде списка с промежутком между карточками и пролистыванием влево для удаления. Похоже, что это желаемый дизайн среди разработчиков iOS.

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

В качестве вдохновения и отправной точки мы возьмем учебный курс Apple «Создание карточного представления».

Модель данных

Сначала создадим модель данных для нашего CardView. Это простая модель, содержащая тему для раскраски нашего CardView.

import Foundation

struct ColorCard: Identifiable {
    let id = UUID()
    var theme: Theme
}
Вход в полноэкранный режим Выход из полноэкранного режима

Вид карточки

CardView имеет следующую структуру.

import SwiftUI

struct CardView: View {
    let colorCard: ColorCard

    var body: some View {
        Text(colorCard.theme.name)
            .foregroundColor(colorCard.theme.accentColor)
            .font(.headline)
            .padding(
                EdgeInsets(
                    top: 25,
                    leading: 5,
                    bottom: 25,
                    trailing: 5
                )
            )
    }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Представление содержимого

И, наконец, наш ContentView, содержащий список CardView. Чтобы создать промежуток между элементами списка, мы удалим разделители строк списка .listRowSeparator(.hidden) и установим фон строки списка на InsettableShape .listRowBackground(), определив верхний и нижний EdgeInsets padding. Последним штрихом будет установка .listStyle(.plain) в .plain.

import SwiftUI

struct ContentView: View {
    @State private var colorCards: [ColorCard] = ColorCard.sampleData

    var body: some View {
        List {
            ForEach(colorCards) { colorCard in
                NavigationLink(destination: colorCard.theme.mainColor) {
                    CardView(colorCard: colorCard)
                }
                .listRowSeparator(.hidden)
                .listRowBackground(
                    RoundedRectangle(cornerRadius: 5)
                        .background(.clear)
                        .foregroundColor(colorCard.theme.mainColor)
                        .padding(
                            EdgeInsets(
                                top: 2,
                                leading: 10,
                                bottom: 2,
                                trailing: 10
                            )
                        )
                )
            }
            .onDelete { idx in
                colorCards.remove(atOffsets: idx)
            }
        }
        .listStyle(.plain)
        .navigationTitle("Color Cards")
        .toolbar {
            Button {
                colorCards.append(ColorCard(theme: Theme.allCases.randomElement()!))
            } label: {
                Image(systemName: "plus")
            }
        }
    }
}
Вход в полноэкранный режим Выход из полноэкранного режима

Полное приложение Playground доступно на github reposity SwiftUI List CardView Example.

Оцените статью
devanswers.ru
Добавить комментарий