iOS SwiftUI) List (UIKit의 tableView에 해당)

iOS SwiftUI) List (UIKit의 tableView에 해당)

 

SwiftUI에는 CollectionView는 없고,

List만 있는데 이건 UIKit의 tableView에 해당.

struct MyList: View {
    var body: some View {
        List {
            ForEach(1...10, id: \.self) {
                Text("마이 리스트 \($0)")
            }
        }
    }
}

struct MyList: View {
    var body: some View {
        List {
            ForEach(1...10, id: \.self) { itemIndex in
                Text("마이 리스트 \(itemIndex)")
            }
        }
    }
}

위에 2개 코드블럭은 같은 의미. (맨 위에있는 똑같은 테이블 만들게 됨)

 

 

섹션을 넣고 싶다면?

List { } 블록 안에다가 넣으면 됨!

List {
            Section(header: Text("헤더입니다.")){
                ForEach(1...10, id: \.self) { itemIndex in
                    
                    MyCard(icon: "book.fill", title: "책읽기\(itemIndex)", start: "1PM", end: "3PM", bgColor: Color.green)
                }
            }
        }

 

 

테이블뷰 내 아이템들의 간격 주기

.listRowInsets(EdgeInsets.init(top: 10, leading: 10, bottom: 10, trailing: 10))

 

var body: some View {
       
        List {
            Section(header: Text("오늘 할 일")){
                ForEach(1...3, id: \.self) { itemIndex in
                    
                    MyCard(icon: "book.fill", title: "책읽기\(itemIndex)", start: "1PM", end: "3PM", bgColor: Color.green)
                }
            }.listRowInsets(EdgeInsets.init(top: 10, leading: 10, bottom: 10, trailing: 10))
            
            Section(header: Text("내일 할 일")){
                ForEach(1...3, id: \.self) { itemIndex in
                    
                    MyCard(icon: "book.fill", title: "책읽기\(itemIndex)", start: "1PM", end: "3PM", bgColor: Color.blue)
                }
            }.listRowInsets(EdgeInsets.init(top: 10, leading: 30, bottom: 10, trailing: 10))
        }.listStyle(GroupedListStyle())
        
    }

 

 

참고)개발하는 정대리 Youtube 영상 https://www.youtube.com/watch?v=Bze0n3fBDJA&list=PLgOlaPUIbynqyJHiTEv7CFaXd8g5jtogT&index=10