[SwiftUI] LazyStack, StickyView

• 스택뷰는 기본적으로 스크롤을 지원하지 않는다.
• 스크롤 지원 시 ScrollView에 임베드하면 된다.
• 스택은 포함된 모든 뷰를 동시에 초기화한다.
  • 스크린에 보이지 않아도 초기화한다.
  • 만약 이미지를 서버에서 다운로드해 표시해야한다면, 문제가 발생한다.
  • 이런 문제 해결을 위해 LazyStack이 필요하다.
  • 스택 이름 앞에 Lazy를 붙이면 된다.

var body: some View {
	ScrollView(.horizontal) {
    	LazyHStack {
        	ForEach(1 ..< 101) { num in
            	NumberView(number: num)
            }
        }
    }
}

항상 LazyStack을 사용해야하나요?

• 기본적으로는 Stack을 사용하고, 문제가 생기면 LazyStack 사용
• 근데, 보통은 LazyGrid를 더 많이 사용한다.

StickyView

• LazyStack으로 구현하기 좋음
• 스택에 포함된 뷰를 Section으로 구분해야 함.
• header나 footer로 표시할 뷰를 지정해야 함.

1. Header(Footer) view 생성

struct SectionHeaderView: View{
	let title: String
    
	var body: some View {
    	HStack {
        	Text(title)
            	.foregroundColor(.white)
                .font(.title3)
                
            Spacer()
        }
        .padding()
        .frame(maxWidth: .infinity)
        .background(.blue)
    }
}

2. ScrollView에서 LazyStack 안에 추가

struct Sections: View {
	var body: some View {
    	ScrollView {
        	LazyVStack {
            	Section {
                	EmojiView(emoji: "")
                    EmojiView(emoji: "")
                    EmojiView(emoji: "")
                } header: {
                	SectionHeaderView(title: "Emotions")
                }
            }
            
            ...
        }
        .frame(maxWidth: .infinity)
    }
}

3. LazyVStack의 파라미터에 pinnedViews 추가

struct Sections: View {
	var body: some View {
    	ScrollView {
        	LazyVStack(pinnedViews: [.sectionHeaders]) {
            	Section {
                	...
                } header: {
                	SectionHeaderView(title: "Emotions")
                }
            }
            
            ...
        }
        .frame(maxWidth: .infinity)
    }
}

4. 섹션에 따른 헤더 변경

struct Sections: View {
	var body: some View {
    	ScrollView {
        	LazyVStack {
            	Section {
                	...
                } header: {
                	SectionHeaderView(title: "Emotions")
                }
                
                Section {
                	...
                } header: {
                	SectionHeaderView(title: "Animals")
                }
            }
            
            ...
        }
        .frame(maxWidth: .infinity)
    }
}