SwiftUI 列表行在点击后更改其背景颜色

Question

我有一个包含行的列表，当我 select 它们时，它们会更改其行背景颜色 (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)))
    }
}

这是点击事件的不良行为：

后select一行

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

SwiftUI 列表行在点击后更改其背景颜色

A SwiftUI list row changes its background color after a tap

ios

swift

swiftui

swiftui-list