[iOS - SwiftUI] NavgationLink에서 Disclosure Indicator 제거 방법, List에서 padding 제거 방법

가장 일반적인 List 형태

• List 하위에 NavigationLink가 있는 형태

import SwiftUI

struct ContentView: View {
  var items = (0...100).map(String.init).map(SomeModel.init)
  
  var body: some View {
    NavigationView {
      List(items){ item in
        NavigationLink(
          destination: {
            Text(item.val)
          },
          label: {
            Text(item.val)
          }
        )
      }
      .navigationTitle("List 예제")
    }
  }
}

struct SomeModel: Identifiable {
  let val: String
  var id: String { val }
}

• 오른쪽에 '>' 화살 Disclosure Indicator가 존재 

• List 내부를 ZStack으로 넣고, NavigationLink에는 EmptyView()를 넣은 다음 opacity(0)해놓게하여 '>'를 가리고 그 위에 HStack을 올려서 구현

    NavigationView {
      List(items){ item in
        ZStack { // <-
          NavigationLink(
            destination: {
              Text(item.val)
            },
            label: {
              EmptyView()
            }
          )
          .opacity(0) // <-
          
          HStack { // <-
            Text(item.val)
          }
        }
      }
      .navigationTitle("List 예제")
    }

List에서 padding 제거 방법

• 위 코드에서 Text(item.val)대신에 Image를 사용하면 List 를 생성할때 자동으로 부여되는 패딩 확인이 가능

    NavigationView {
      List(items){ item in
        ZStack {
          NavigationLink(
            destination: {
              Image("background") // <-
                .resizable()
                .aspectRatio(contentMode: .fit)
            },
            label: {
              EmptyView()
            }
          )
          .opacity(0)
          
          HStack {
            Image("background") // <-
              .resizable()
              .aspectRatio(contentMode: .fit)
          }
        }
      }
      .navigationTitle("List 예제")
    }

• List를 생성할때 디폴트로 부여되는 값이므로 List 생성방법을 다르게 설정해야 padding 제거가 가능
  • List에서 데이터를 받지 않고, ForEach를 통해 데이터를 받기
  • List에서 가장 아래 있는 view인 ZStack에.listRowInsets(EdgeInset()) 추가

    NavigationView {
      List {
        ForEach(items) { item in // <-
          ZStack {
            NavigationLink(
              destination: {
                Image("background")
                  .resizable()
                  .aspectRatio(contentMode: .fit)
              },
              label: {
                EmptyView()
              }
            )
            .opacity(0)

            HStack {
              Image("background")
                .resizable()
                .aspectRatio(contentMode: .fit)
            }
          }
          .listRowInsets(EdgeInsets()) // <-
        }
      }
      .navigationTitle("List 예제")
    }

• 결과
  • List안에 들어가는 View의 우측 상단과 좌측 상단의 모양도 둥글게 자동으로 변형
  • 상하좌우 패딩값이 제거

• 리스트에 기본적으로 있는 left, right 마진 값 제거 방법

• List 하위에 아래 코드를 추가
  • .listStyle(PlainListStyle())

List {
  ...
}
.listStyle(PlainListStyle())

* 전체 코드: https://github.com/JK0369/ExList-remove-padding