【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)
        }
    }
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です