[SwiftUI] 목록(List)의 행(row) 및 헤더(header) 높이 변경 / 리스트 섹션 간 높이 간격 조절

SwiftUI List에서 행(row)과 헤더(header) 높이를 변경하는 방법은 무엇일까요? 또 리스트의 섹션 간 높이 간격을 조절하는 방법은 무엇일까요?

 

행, 헤더 높이 변경 방법: .environment 수정자 이용 

defaultMinListRowHeight 라는 EnvironmentValue를 사용해서 기본 최소 행 높이를 설정할 수 있습니다. 마찬가지로 defaultMinListHeaderHeight를 사용하면 섹션 헤더의 높이를 지정할 수 있습니다.

아래 코드는 그룹화된 리스트에서 슬라이더로 두 값을 조절하는 예시입니다.

// ...SwiftUI View에서 작성...

@State private var rowHeight: CGFloat = 40
@State private var headerHeight: CGFloat = 60

var body: some View {
  VStack {
    HStack {
      Text("Row height")
      Slider(value: $rowHeight, in: 40.0...80.0)
    }
    HStack {
      Text("Header height")
      Slider(value: $headerHeight, in: 60.0...80.0)
    }
    List(1..<5) { section in
      Section("Section \(section)") {
        ForEach(1..<3) { row in
          Text("Row \(row) of section \(section)")
        }
      }
    }
  }
  .padding()
  .environment(\.defaultMinListRowHeight, rowHeight) // 👈 행 높이 지정
  .environment(\.defaultMinListHeaderHeight, headerHeight) // 👈 헤더 높이 지정
}

결과 화면 GIF

단점은 최소값을 지정하는 것이기 때문에 높이를 강제할 수 없고 내용에 따라 늘어날 수 있다는 점입니다. 

---

 

리스트 섹션 간 간격 조절

iOS 17 이상

Section {
  ...
} header: {
  Text("Header")
}
.listSectionSpacing(10)

또는

.listSectionSpacing(.compact)

 

iOS 16 이하

UICollectionView.appearance() 전역 설정 조정하여 높이를 조정할 수 있고, 이 방법은 iOS 16버전 이하에서도 사용할 수 있습니다.

다만 단점으로는, 모든 List의 설정에 영향을 미치기 때문에 onDisappear 등으로도 원래 설정으로 완전히 되돌리는 방법은 없으므로 주의해서 사용해야 합니다.

import SwiftUI

struct ContentView: View {
  init() {
    // 섹션간 높이 조절
    var layoutConfig = UICollectionLayoutListConfiguration(appearance: .plain) // 주의: 우선하여 적용됨
    layoutConfig.headerMode = .supplementary
    layoutConfig.headerTopPadding = 10
    let listLayout = UICollectionViewCompositionalLayout.list(using: layoutConfig)
    UICollectionView.appearance().collectionViewLayout = listLayout
  }

  ...
}

// 되돌리기 (의도되로 되지 않을 수 있음)

.onDisappear {
  let layoutConfig = UICollectionLayoutListConfiguration(appearance: .plain)
  let defaultLayout = UICollectionViewCompositionalLayout.list(using: layoutConfig)
  UICollectionView.appearance().collectionViewLayout = defaultLayout
}

간격 적용 전/후