🖇️

SwiftUIのListで幅いっぱいの区切り線をひく

2024/03/30に公開

SwiftUIのListのRowSeparatorは、通常、左側に自動で隙間があきます。
UITableViewだとseparatorInsetで調整できましたが、SwiftUIでは調整する方法がなくなっています。

これをリストの横幅いっぱいにどうしても引きたい場合の方法です。

List {
    Text("Hello, world!")
        .listRowSeparator(.hidden)
    Color.clear
        .frame(height: 0.5)                               // 区切り線の高さ
        .listRowBackground(Color.gray.ignoresSafeArea())  // 区切り線の色をここで指定
        .listRowInsets(EdgeInsets())
        .listRowSeparator(.hidden)
    Text("Hello, world!")
        .listRowSeparator(.hidden)
}
.environment(\.defaultMinListRowHeight, 0)

仕組み

線を引くというより、区切り線と同じ背景色を持つRow(セル)を割り込ませているだけです。
区切り線を引こうとすると、必ず隙間が設定されてしまうので、このような実装にしています。
背景色の設定で、.ignoresSafeAreaを指定しているのは、iPhoneで横向きにした時用です。

注意点は、最後の行でListのRowのデフォルトの高さを変更していることです。
ここを変更しないと、区切り線の高さ指定が反映されません。
逆にRowのコンテンツ内容に関わらず、最低限の高さを揃えたい場合は、各Rowに.frameで高さ指定をする必要があります。

確認環境

iOS15 - iOS17

Discussion