How can I change the colour of separator in list of SwiftUI?

Question

I created a list in SwiftUI. I want to change the color or remove the separator as, In UIKit, we can easily change the color of separator in TableView.

Below is the code and UI(image) of the list in SwiftUI

@State private var users = ["Paul", "Taylor", "Adele"]

var body: some View {

    List(){
                ForEach(users, id: \.self) { user in
                    HStack{
                        Image("helmet").resizable().frame(width: 40, height: 40, alignment: .leading)
                        VStack(alignment : .leading){
                            Text(user).font(.custom("SFProText-Semibold", size: 14))
                            Text("Blu Connect").font(.custom("SFProText-Semibold.ttf", size: 11))
                        }
                    }
                }
                .onDelete(perform: delete)

            }
}

@matt tableView.separatorColor = UIColor.red – Mohammad Mugish Oct 26 '19 at 11:23 — Mohammad Mugish, Oct 26 '19 at 11:23

Sorin Lica · Accepted Answer · 2019-10-26T12:06:48.023

6

Try this

var body: some View {
        UITableView.appearance().separatorColor = UIColor.blue
        return List(){
            ForEach(users, id: \.self) { user in
                HStack{
                    Image("helmet").resizable().frame(width: 40, height: 40, alignment: .leading)
                    VStack(alignment : .leading){
                        Text(user).font(.custom("SFProText-Semibold", size: 14))
                        Text("Blu Connect").font(.custom("SFProText-Semibold.ttf", size: 11))
                    }
                }
            }
            .onDelete(perform: delete)

        }
    }

This is a kind of global variable, so you are changing the separator colour in all UITableViews from your app (List and Form are using UITableViews under the hood)

edited Oct 26 '19 at 12:06

answered Oct 26 '19 at 08:44

Sorin Lica

6,894
10
35
68

Where I can write this? In SwiftUI class this is not working. – Mohammad Mugish Oct 26 '19 at 11:21
I am not using UIKit at all. So how can I access this UITableView.appearance().separatorColor and where? – Mohammad Mugish Oct 26 '19 at 11:34
Can I know what is the concept of this solution? Maybe some articles or documents where I understand how exactly this worked... (List and Form are using UITableViews under the hood) This is a nice explanation in short. I want to know more than this. – Mohammad Mugish Oct 26 '19 at 21:15
2

damn SwiftUI, this is not working on iOS 14 #@$@#%$@#^%^ – Mette Mar 08 '21 at 20:12

score 1 · Answer 2 · answered Jun 09 '21 at 19:50

1

2021 – Xcode 13 / SwiftUI 3

Change color of separator:

.listRowSeparatorTint(Color.pink)

Hide separator:

.listRowSeparator(.hidden)

answered Jun 09 '21 at 19:50

ixany

5,433
9
41
65

Mojtaba Hosseini · Answer 3 · 2021-07-11T16:02:20.343

0

iOS 15

From this year, you can apply color to any separator individually with listRowSeparatorTintColor modifier like:

To remove

From iOS 15, you can use listRowSeparator modifier by passing hidden. Please read this detailed answer for more information and samples.

edited Jul 11 '21 at 16:02

answered Jun 08 '21 at 17:10

Mojtaba Hosseini

95,414
31
268
278

score 0 · Answer 4 · answered Oct 04 '22 at 17:55

If you need to do this on older versions of iOS checkout Introspect

You can then do something like the following to change the separator color to red:

List {
    // ...
}
.introspectTableView { tableView in
    tableView.separatorColor = UIColor.red
}

for new versions see @MojtabaHosseini's answer

score -1 · Answer 5 · answered Jul 21 '22 at 21:47

-1

You can also swap out the List() element for a ScrollView() element.

answered Jul 21 '22 at 21:47

phil

993
1
10
34

How can I change the colour of separator in list of SwiftUI?

5 Answers5

iOS 15

To remove

Linked