반응형
리스트 컬럼의 디자인을 커스텀하게 변경
struct ContentView: View {
@State private var items: [Item] = [
Item(id: 1, title: "아이템 1", description: "아이템 1 설명"),
Item(id: 2, title: "아이템 2", description: "아이템 2 설명"),
Item(id: 3, title: "아이템 3", description: "아이템 3 설명")
]
var body: some View {
VStack {
List(items) { item in
VStack(alignment: .leading) {
Text(item.title)
.font(.headline)
.foregroundColor(.blue) // 제목 텍스트 컬러 설정
Text(item.description)
.font(.subheadline)
.foregroundColor(.gray) // 설명 텍스트 컬러 설정
}
.padding(.vertical, 8) // 항목 간의 수직 패딩 설정
.background(Color.yellow) // 각 항목의 배경색 설정
.cornerRadius(10) // 각 항목의 모서리를 둥글게 설정
.padding(.horizontal, 16) // 각 항목의 가로 패딩 설정
.listRowInsets(EdgeInsets()) // 항목 간의 간격 제거
}
}
}
}
반응형