[swiftui] 리스트 커스텀하기 (리스트 항목 배경 설정)

struct ListView: View {
    @EnvironmentObject var listModel: ListModel // ListModel에 배열이 있다고 가정!
    
    var body: some View {
        VStack{
            Text("글귀 리스트")
                .font(Font.custom("폰트적용하세요", size: 32))
            List(listModel.dataArray, id: \.self) { item in
                        .font(Font.custom("폰트적용하세요", size: 32))
                }
            }
            
        }
    }
}

이러한 리스트 뷰가 있다고 하면

이런 기본 리스트가 적용된다!

이 리스트 뷰를 내맘대로 커스텀 해보자

    var body: some View {
        VStack{
            Text("글귀 리스트")
                .font(Font.custom("나눔손글씨 꽃내음", size: 32))
            List(listModel.dataArray, id: \.self) { item in
                ZStack{
                    Image("paper")
                        .resizable()
                        .scaledToFit()
                    Text(item)
                        .font(Font.custom("나눔손글씨 꽃내음", size: 32))
                }
            }
            
        }
    }

- Zstack으로 이미지와 텍스트를 겹치게 만들었다! 그럼 이런 형태가 나온다

 

사용한 modifier

- Image

.resizable() : 이미지 크기 조절하기

.scaledToFit() : 알아서 조절 fit되게 ㅋ

 

- Vstack : 자식 뷰들을 수직으로 쌓는 레이아웃을 생성함 / 위에서 아래로 뷰를 배치하는데 사용!

- Zstack : 자식 뷰들을 3D 공간에서 Z 축을 기준으로 겹쳐 놓는 레이아웃을 생성함 / 뷰를 중첩하여 겹치는 뷰를 만들 때 사용

 

하지만 나는 리스트 형태 없이 아예 내가 추가한 이미지가 리스트 형식으로 나왔으면 좋겠다!

-> 흰 부분 없이 바로 이미지(png라 가정)만 나왔으면 좋겠단 말이지...

 

첫 번째 시도 - List의 background를 설정하자

List(listModel.dataArray, id: \.self) { item in
                    Text(item)
                        .font(Font.custom("나눔손글씨 꽃내음", size: 32))
            }
            //.listStyle(PlainListStyle())
            .background(
            Image("paper")
                .resizable()
                .scaledToFill()
            )

사용한 modifier

- List

.background() : 리스트의 전체 배경에 대한 설정! -> 리스트 내의 모든 영역에 배경을 적용함

 

하지만 내가 의도한 건 리스트의 인덱스 하나하나의 배경을 설정하고 싶은 것이었다! 당연히 안 됨! 다른 걸 쓰자

 

 

두 번째 시도 - ForEach 사용

    var body: some View {
        VStack{
            Text("글귀 리스트")
                .font(Font.custom("폰트~", size: 32))
            List{
                ForEach(listModel.dataArray, id: \.self) { item in
                    Text(item)
                        .font(Font.custom("폰트~", size: 32))
                        .background(
                            Image("paper")
                                .resizable()
                                .scaledToFill()
                        )
                }
            }
            .listStyle(PlainListStyle())
            
        }
    }

사용한 modifier

- List

.listStyle() : 리스트의 스타일을 설정

- Image

.scaledToFill() : fit을 쓰면 너무 작아져서 fill을 씀! 근데 이거 두 개 쓰이는 곳 구분을 어떻게 하는지...

 

ForEach를 사용해서 각각의 아이템에 배경을 설정하는 방법을 썼다!

글자가 치우친 건 padding이나 frame, offset을 주어서 가운데로 오게 설정했다

그리고 나는 배경이 없는 느낌을 원하는 거니까 list style도 plain으로 바꿔주었다!

 

최종 코드와 결과물

struct ListView: View {
    @EnvironmentObject var listModel: ListModel
    
    var body: some View {
        VStack{
            Text("글귀 리스트")
                .font(Font.custom("폰트트", size: 32))
            List{
                ForEach(listModel.dataArray, id: \.self) { item in
                    Text(item)
                        .font(Font.custom("폰트트", size: 32))
                        .frame(minWidth: 0, maxWidth: .infinity, alignment: .center)
                        .background(
                            Image("paper")
                                .resizable()
                                .scaledToFill()
                        )
                        .listRowInsets(EdgeInsets(top: 10, leading: 0, bottom: 50, trailing: 0))
                        .offset(y: 20)
                }
                .listRowSeparator(.hidden)
            }
            .listStyle(PlainListStyle())
            
        }
    }
}

사용한 modifier

- Text

.listRowInsets(EdgeInsets(상하좌우!))

.offset(위치!)

 

-List

.listRowSeparator : 리스트 항목 간의 구분 선 없애기!

 

원하던 결과물이 나왔다~

근데 조금 잘리는 건 어떻게 해야할지 고민이당

암튼 성공