카테고리 없음 / / 2023. 7. 17. 12:21

SwiftUI 리스트 컬럼 디자인 커스텀

반응형

리스트 컬럼의 디자인을 커스텀하게 변경

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()) 	// 항목 간의 간격 제거
            }
        }
    }
}
반응형
  • 네이버 블로그 공유
  • 네이버 밴드 공유
  • 페이스북 공유
  • 카카오스토리 공유