SwiftUI 목록 카드 보기

Apple의 건강 및 피트니스 앱이 CardViews를 표시하는 방식이 마음에 듭니다. This seem to be a desired design between iOS developers .



This playground is a simple example on how to recreate the same effect with SwiftUI 온라인에서 찾은 모든 예제는 the same design in a much more complex manner을 구현합니다.



우리는 Apple의 Dev Training "Creating a card view"을 영감과 출발점으로 삼을 것입니다.

데이터 모델

먼저 CardView용 데이터 모델을 생성해 보겠습니다. CardViews에 색상을 지정하기 위한 테마를 포함하는 간단한 모델입니다.

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
                )
            )
    }
}

콘텐츠 보기

그리고 마지막으로 CardView 목록을 포함하는 ContentView입니다. 목록 항목 사이에 간격을 만들기 위해 목록 행 구분 기호.listRowSeparator(.hidden)를 제거하고 목록 행 배경을 상단 및 하단 EdgeInsets 패딩을 정의하는 InsettableShape.listRowBackground()로 설정합니다. 마지막 터치는 .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 저장소SwiftUI List CardView Example에서 사용할 수 있습니다.