[SwiftUI] List Separator Line Hidden (IOS14 이하)

SwiftUI List 사용중 target os 14에서 List의 Separator Line 숨기는 기능이 없는걸 알고 당황했음. ㅜㅜ

참고사이트 : https://moonggi-dev-story.tistory.com/75

 

target os 15 이상에서는 .listRowSeparator(.hidden) 제공되서 간단하게 라인을 숨김수 있음.

extension View {
    
    @ViewBuilder
    func listRowSeparatorHidden() -> some View {
        if #available(iOS 15, *) {
            self.modifier(ListHideLineFor15())
        } else {
            self.modifier(ListHideLineFor14())
        }
    }
    
    func hideRowSeparator(
      insets: EdgeInsets = .defaultListRowInsets,
      background: Color = .white
    ) -> some View {
      modifier(HideRowSeparatorModifier(
        insets: insets,
        background: background
      ))
    }
}

struct ListHideLineFor14: ViewModifier {
    
    func body(content: Content) -> some View {
        content.hideRowSeparator()
    }
}

@available(iOS 15, *)
struct ListHideLineFor15: ViewModifier {
    
    func body(content: Content) -> some View {
        content.listRowSeparator(.hidden)
    }
}

struct HideRowSeparatorModifier: ViewModifier {
  static let defaultListRowHeight: CGFloat = 44
  var insets: EdgeInsets
  var background: Color
  init(insets: EdgeInsets, background: Color) {
    self.insets = insets
    var alpha: CGFloat = 0
    UIColor(background).getWhite(nil, alpha: &alpha)
    self.background = background
  }
    
  func body(content: Content) -> some View {
    content
      .padding(insets)
      .frame(
        minWidth: 0, maxWidth: .infinity,
        minHeight: Self.defaultListRowHeight,
        alignment: .leading
      )
      .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
      .background(background)
  }
}

extension EdgeInsets {
  static let defaultListRowInsets = Self(top: 0, leading: 0, bottom: 0, trailing: 0)
}

 

적용

let items = ["a","b","c","d","e"]

List {
	ForEach(items, id:\.self) {
    	Text("아이템 값 : \($0)")
            .listRowInsets(EdgeInsets()) // 좌우 여백 없애기
        	.listRowSeparatorHidden()  // Bottom Line Hidden
    }
}
.listStyle(.inset)  // 리스트 그룹 여백없이 리스트 구성시 사용