Строка списка SwiftUI меняет цвет фона после нажатия

Question

У меня есть список со строками, который, когда я их выбираю, меняет цвет фона строки (UITableViewCellSelectedBackground). Я не хочу этого поведения, поэтому я не хотел бы менять цвет фона строки на didSelect.

Я пытался изменить цвет фона (на тот же цвет, что и фон нормального состояния) при событии касания, но это не работает. Вот текущий код:

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

Это нежелательное поведение при событии крана:

После выбора строки

Answer 1

Скопируйте и вставьте на свою игровую площадку и увидите разницу в первом, втором, третьем и последнем ряду ...

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())

Я поместил некоторую непрозрачность там, чтобы все изменения были лучше видны.

Упрощенная строка, которую вы можете использовать в качестве шаблона для создания собственного RowView (...)

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

Наконец, с вашим собственным RowView () это выглядит как

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

и некоторые примеры

, где 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 ().