SwiftUI 列表行在轻按后更改其背景颜色

Question

I have a List with rows which when I select them, they change its row background color(UITableViewCellSelectedBackground). I do not want this behaviour, so I would like to not change a row background color on a didSelect.

I have tried to change the background color (to same color as normal state background) on tap event, but it does not work. Here is the current code:

var body: some View {
    List {
        ForEach (vars){ var in
            ZStack {
                Foo(a: var.name)
                    .listRowInsets(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 0))
                NavigationLink(destination: FooDetailView(b: var)) {
                    EmptyView()
                }.buttonStyle(PlainButtonStyle())
            }
        }.listRowBackground(Color(#colorLiteral(red: 0.03921568627, green: 0.03921568627, blue: 0.03921568627, alpha: 1)))
    }
}

This is the undesired behaviour on a tap event:

After select a row

Answer 1

Copy-paste to your Playground and see the difference in first, second, third and final row ...

import SwiftUI
import PlaygroundSupport

struct ContentView: View {
    //@State var selected
    var body: some View {
        NavigationView {
            List {
                ZStack {
                    NavigationLink(destination: Text("A")) {
                        Text("A")
                    }
                    .background(Color.yellow)
                }
                .border(Color.red)

                ZStack {
                    NavigationLink(destination: Text("B")) {
                        Text("B")
                    }
                    .background(Color.yellow)
                }
                .border(Color.red)
                .listRowInsets(EdgeInsets())

                ZStack {
                    GeometryReader { proxy in
                        NavigationLink(destination: Text("C")) {
                            Text("C").frame(height: proxy.size.height)
                        }
                        .background(Color.yellow)
                    }
                }
                .border(Color.red)
                .listRowInsets(EdgeInsets())

                ZStack {
                    GeometryReader { proxy in
                        NavigationLink(destination: Text("D")) {
                            Text("D").frame(height: proxy.size.height)
                        }
                    }
                    .background(Color.yellow.opacity(0.4))
                    .padding(.horizontal)
                }
                .background(Color.yellow.opacity(0.2))
                .listRowInsets(EdgeInsets())
            }
            .listRowBackground(Color.blue)
        }
    }
}

PlaygroundPage.current.setLiveView(ContentView())

I put some opacity there, so all the changes are better visible.

Simplified row which you can use as a template to create your own RowView(...)

ZStack {
    Color.yellow
    GeometryReader { proxy in
        NavigationLink(destination: Text("D")) {
            Text("D").frame(height: proxy.size.height)
        }
    }
    .padding(.horizontal)
}
.listRowInsets(EdgeInsets())

Finally, with your own RowView() it looks like

ZStack {
    // background color
    Color.yellow.frame(maxWidth: .infinity)
    // your row view
    RowView()
    NavigationLink(destination: Text("D")) {
        EmptyView()
    }
    .padding(.horizontal)
}
.listRowInsets(EdgeInsets())

and some example

where RowView()

struct RowView: View {
    var body: some View {
        HStack {
            VStack(alignment: .leading) {
                Text("Title").font(.title)
                HStack {
                    Text("detail")
                }
            }
            Spacer()
            Text("12:55").font(.title).padding()
            }.padding()
    }
}

Answer 2

您可以使用 tabelView.selectionStyle = .none 将此行放在 viewDidload() 中。