動作確認環境
【SwiftUI 3.0】List の 区切り線を非表示にする&色を変える方法
List の 区切り線を非表示にする
.listRowSeparator に .hidden を指定することで区切り線を非表示にすることができます。
List {
Section("国名") {
ForEach(countries, id: \.self) { country in
Text(country)
}
.listRowSeparator(.hidden)
}
}
![](https://www.yururiwork.net/wp-content/uploads/2021/12/simulator_screenshot_BB250B57-0583-4099-B835-A04D6CA2FD03-473x1024.png)
上記ではSection内の全ての区切り線を非表示にしていますが、個別に指定することもできます。
List {
Section("国名") {
ForEach(countries, id: \.self) { country in
Text(country)
.listRowSeparator((country == "China" || country == "Germany") ? .hidden : .visible)
}
}
}
![](https://www.yururiwork.net/wp-content/uploads/2021/12/simulator_screenshot_B34F78EB-48EE-47C6-BDBA-18A51210A416-473x1024.png)
条件に応じて、一部の区切り線だけ表示されていないことがわかると思います。
List の区切り線のカラーを変更する
.listRowSeparatorTint で区切り線の色を変えることができます。
List {
Section("国名") {
ForEach(countries, id: \.self) { country in
Text(country)
}
.listRowSeparatorTint(.orange)
}
}
![](https://www.yururiwork.net/wp-content/uploads/2021/12/simulator_screenshot_ABCDE7F4-6397-47FF-8756-548727C8B39D-473x1024.png)
こちらも、表示設定と同様に個別にカラーを指定できます。
List {
Section("国名") {
ForEach(countries, id: \.self) { country in
Text(country)
.listRowSeparatorTint((country == "Australia" || country == "Egypt") ? .blue : .red)
}
}
}
![](https://www.yururiwork.net/wp-content/uploads/2021/12/simulator_screenshot_212045C1-5DDB-4390-BEB1-04357E06EF7C-473x1024.png)
macOS Monterey(12.0.1)
Xcode 13.1
iPhone 13 Pro シミュレータ(iOS 15.0)※iOS 14 以前では動作しません。