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 =。没有将这一行放在viewDidload（）中。

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

2 个答案: