[SwiftUI]リスト(List)のセクション(section header)の高さ(height)を変える(change)には？

どうも、ちょげ(@chogetarou)です。

リストのセクションヘッダーの高さを変える方法を紹介します。

方法
使用例

方法

Listのセクションヘッダーの高さを変えるには、envrionment修飾子を使います。

まず、Listもしくはそれより上の階層のビューに「environment」を付与します。

そして、environmentの第１引数に「\.defaultMinListHeaderHeight」、第２引数にセクションの高さを指定します。

List {
    //Some Item
}
.environment(\.defaultMinListHeaderHeight, /*高さ*/)

environmentの「\.defaultMinListHeaderHeight」を使うことで、Listのセクションの高さを変えることができます。

リストのセクションの高さは、frame修飾子を使って変えることもできます。

具体的には、セクションの引数「header」にframe修飾子を付与し、frameの引数「height」に高さを指定します。

Section(
   header: Header()
      .frame(height : /*高さ*/)
) {
   //Some Item
}

使用例

以下は、使用例です。

struct ContentView: View {
    
    var body: some View {
        VStack {
            List {
                Section(
                    header: Text("Section 1")
                ) {
                    ForEach (1..<6, id: \.self) { index in
                        Text("\(index)")
                    }
                }
                
                Section(
                    header: Text("Section 2")
                ) {
                    ForEach (6..<11, id: \.self) { index in
                        Text("\(index)")
                    }
                }
                
            }
            .listStyle(GroupedListStyle())
        }
        .environment(\.defaultMinListHeaderHeight, 50)
    }
}