[SwiftUI] .listRowBackground(_:) : List의 전체/특정 row 커스텀하기

 

 

List 속에 있는 row들의 default 색상은 흰색이다. 그런데 여기서 특정 row를 클릭하면 색상을 변경해서 눈에 띄도록 하고 싶다. 그렇다면 Button 혹은 onTapGesture로 사용자의 탭 액션을 감지했을 때, action으로 해당 row가 selected 된 row라는 것을 알려주면 되지 않을까?? 찾아보니 List의 Row의 배경을 바꿀 수 있었다. 색상만 바꿀 수도 있고 형태도 변경할 수 있다. (사실 형태는 List 내의 View를 따로 만들어주면 바꿀수도 있다.)

 

📌 List의 전체 row의 배경을 바꿔보자.

 

List{
    ForEach(categoryList.categories) { category in
        HStack{
            Text(category.name)
                .font(.system(size: 16))
            Spacer()
            Text("\(category.numOfLink)")
            Image(systemName: "chevron.right")
                .foregroundColor(.gray)
        }
        .listRowBackground(RoundedRectangle(cornerRadius: 10).fill(light_gray).frame(width: 260, height: 40))
        .padding(4)
    }
}
.listStyle(InsetListStyle())

 

.listRowBackground() 여기에 View를 넣어주면 된다.

 

.listRowBackground(RoundedRectangle(cornerRadius: 10)
                   .fill(light_gray)
                   .frame(width: 260, height: 40))

 

이런 식으로 하면

 

 

 

이렇게 할 수 있다. 그런데 흠.. 중간에 선을 없애고 싶다.

이럴 땐, .listRowSeperator(.hidden) modifier를 적용하면 된다. - iOS 15 이상

 

 

주의할 점은 iOS의 버전마다 다르다는 것이다.. 흑흑.. 꼼꼼하게 하자^^

iOS 13의 경우, 아래처럼 List 밑에 onAppear를 사용해서 줄을 없애야 한다.

 

.onAppear{
    UITableView.appearance().separatorColor = .none
}

 

 

---

 

 

📌 선택된 row만 바꾸고 싶다면? 

선택되었다는 것을 알려야 하기 때문에 Button 혹은 onTapGesture와 같이 트리거를 발생하는 것이 필요하다.

나는 onTapGesture를 사용해서 해봤다.

 

List{
    ForEach(categoryList.categories) { category in
        HStack{
            Text(category.name)
                .font(.system(size: 16))
            Spacer()
            Text("\(category.numOfLink)")
            Image(systemName: "chevron.right")
                .foregroundColor(.gray)
        }
        .listRowBackground(self.selected == category.categoryId ? light_gray : Color(.white))
        .padding(4)
        .onTapGesture {
            self.selected = category.categoryId
        }
    }
}
.listStyle(InsetListStyle())

 

아래의 코드에 주목하자. 

 

.onTapGesture { //클릭하면 현재 selected 변수에 categoryId 할당
    self.selected = category.categoryId
}

 

탭 제스처가 이루어지면 selected 변수에 category.categoryId 값이 들어가는 것이다.

이렇게 되면 선택된 row의 id가 들어가고 selected 변수로 선택된 row를 알 수 있는 것이다.

 

.listRowBackground(self.selected == category.categoryId ? light_gray : Color(.white))

 

여기서 ForEach문을 돌면서 selected와 동일한 categoryId를 가진 category row 라면 배경 색상을 light_gray로 변경시키는 것이다.