Swift・SwiftUI

【SwiftUI 3.0】List の 区切り線を非表示にする&色を変える方法

動作確認環境

macOS Monterey（12.0.1）

Xcode 13.1

iPhone 13 Pro シミュレータ（iOS 15.0）※iOS 14 以前では動作しません。

【SwiftUI 3.0】List の 区切り線を非表示にする&色を変える方法

List の 区切り線を非表示にする

.listRowSeparator に .hidden を指定することで区切り線を非表示にすることができます。

List {
    Section("国名") {
        ForEach(countries, id: \.self) { country in
            Text(country)
        }
        .listRowSeparator(.hidden)
    }
}

上記ではSection内の全ての区切り線を非表示にしていますが、個別に指定することもできます。

List {
    Section("国名") {
        ForEach(countries, id: \.self) { country in
            Text(country)
                .listRowSeparator((country == "China" || country == "Germany") ? .hidden : .visible)
        }
    }
}

条件に応じて、一部の区切り線だけ表示されていないことがわかると思います。

List の区切り線のカラーを変更する

.listRowSeparatorTint で区切り線の色を変えることができます。

List {
    Section("国名") {
        ForEach(countries, id: \.self) { country in
            Text(country)
        }
        .listRowSeparatorTint(.orange)
    }
}

こちらも、表示設定と同様に個別にカラーを指定できます。

List {
    Section("国名") {
        ForEach(countries, id: \.self) { country in
            Text(country)
                .listRowSeparatorTint((country == "Australia" || country == "Egypt") ? .blue : .red)
        }
    }
}