[SwiftUI] List (tableView in UIKit)

List (tableView in UIKit)

 

✅ SwiftUI의 List에 대해서 알아보자.

List를 구성하는건 크게 어렵지 않다.

 

 

✅ MyList

import SwiftUI

struct MyList: View {
    
    // 다른쪽에서 데이터를 받아올 것이기 때문에
    @Binding var isNavigationBarHidden: Bool
    
    // 바인딩의 경우에는 생성자 필수!
    init(isNavigationBarHidden: Binding<Bool> = .constant(false)) {
        
        if #available(iOS 14.0, *){
            
        } else {
        	// 아래 버전에서는 푸터가 있어서 이 코드를 통해서 없애야 한다.
            UITableView.appearance().tableFooterView = UIView()
        }
        
        UITableView.appearance().separatorStyle = .none // 구분선 없애기
        
        // 내부의 self.isNavigationBarHidden = isNavigationBarHidden랑 같은 의미
        _isNavigationBarHidden = isNavigationBarHidden
        
    }
    
    var body: some View{
        
//        List{
//            Text("마이리스트")
//            Text("마이리스트")
//            Text("마이리스트")
//            Text("마이리스트")
//            Text("마이리스트")
//            Text("마이리스트")
//        }
        
//        List{
//            ForEach(1...10, id: \.self){
//                Text("마이리스트 \($0)")
//            }
//        }
        
        List{
            // 섹션을 줄 수 있어
            Section( 
            	// 섹션의 헤더 세팅
                header: 
                Text("오늘 할 일")
                    .font(.headline)
                    .foregroundColor(Color.black)
                
                // 섹션의 푸터세팅
                ,footer: Text("footer")
            ) { 
            	// 하나의 섹션에 아이템 3개 만듦
                ForEach(1...3, id: \.self){ itemIndex in
                    MyCard(icon: "book.fill", title: "책읽기 \(itemIndex)", start: "1 PM", end: "3 PM", bgColor: Color.green)
                    
                }
            }
            // 섹션의 list의 각 row에 inset을 얼마나 줄지 선택
            .listRowInsets(EdgeInsets.init(top: 10, leading: 10, bottom: 10, trailing: 10))
            
            Section(header:
                Text("내일 할 일")
                    .font(.headline)
                    .foregroundColor(Color.black)
            ) {
                ForEach(1...20, id: \.self){ itemIndex in
                	// 아이템의 배경은 여기서 처리 해야해!
                    MyCard(icon: "book.fill", title: "책읽기 \(itemIndex)", start: "1 PM", end: "3 PM", bgColor: Color.blue)
                }
            }
            .listRowInsets(EdgeInsets.init(top: 10, leading: 10, bottom: 10, trailing: 10))
            .listRowBackground(Color.yellow) // 각 row의 배경색
            
        }
        .listStyle(GroupedListStyle()) // 리스트의 스타일 선택
//        .listStyle(PlainListStyle())
        .navigationBarTitle("내 목록") // 리스트에서 네비게이션 타이틀 주기
//        .navigationBarHidden(self.isNavigationBarHidden)
        .onAppear { // onAppear는 보여질 때 나타나는 속성
            self.isNavigationBarHidden = false // 네비게이션 바가 hidden되지 않게끔
        }
        
    } // NavigationView
}

 

✅ ContentView

import SwiftUI

struct ContentView: View {
    
    @State var isNavigationBarHidden : Bool = false // contentView에서는 네비게이션 바를 가림
    
    var body: some View {
    	NavigationLink(
        	destination: MyList (
            	isNavigationBarHidden: self.$isNavigationBarHidden // 달러싸인 주의
           	)
		) {
			Image(systemName: "line.horizontal.3")
				.font(.largeTitle)
				.foregroundColor(Color.black)
        } // NavigationLink
    } // body
} // ContentView

 

 

위의 코드들을 설명하자면 contentView에서는 네비게이션 바를 가리고 다음 페이지로 넘어갔을 때 활성화하기 위함!