ios - SwiftUI:如何更改用户按住导航链接或按钮等内容时发生的颜色变化？

Question

我遇到的问题是，当用户按住导航链接时，相应“卡片”周围空间的颜色会发生变化。当然，这不是我想要的。但作为一个 SwiftUI 初学者，我不知道如何解决它。但我真的很想修复这个错误，因为它不是很有创新性并且会激怒用户。因此，如果有人找到一种可以改变卡片颜色而不是其周围空间的解决方案，我将不胜感激。

我怀疑我的问题是因为系统将两侧的空间和相应的卡片视为一个列表单元格。当然，就像系统中的其他任何地方一样，当用户按住这些列表单元格时，它们会改变颜色。

还有我的代码:

import SwiftUI

struct ContentView: View {
    var body: some View {
        UITableView.appearance().separatorStyle = .none
        UITableViewCell.appearance().backgroundColor = .none

        return NavigationView {
            List {
                Cards()
                    .listRowInsets(EdgeInsets(top: 0, leading: 16, bottom: 16, trailing: 16))
                Cards()
                    .listRowInsets(EdgeInsets(top: 0, leading: 16, bottom: 16, trailing: 16))
                Cards()
                    .listRowInsets(EdgeInsets(top: 0, leading: 16, bottom: 16, trailing: 16))
            } .listStyle(GroupedListStyle()).padding(.bottom, -32) // GroupedListStyle is needed for the background color

            // Navigation bar
            .navigationBarTitle(Text("Header"))
            .navigationBarItems(
                leading:
                Button(action: { print("add") }) {
                   Image(systemName: "plus")
                },
                trailing:
                Button(action: { print("edit") }) {
                   Text("Edit")
                }.disabled(true)
            )
        }
    }
}

// For the Cards on the main screen
struct Cards: View {
    var body: some View {
        VStack(spacing: 0) {
            Image("swiftui")
                .resizable()
                .aspectRatio(contentMode: .fit)

            HStack {
                VStack(alignment: .leading, spacing: 0) {
                    Text("Title")
                        .font(.title)
                        .foregroundColor(.primary)
                        .lineLimit(3)
                    Text("Subtitle")
                        .font(.caption)
                        .foregroundColor(.secondary)
                }
                .layoutPriority(100)

                Spacer()

                NavigationLink(destination: EmptyView()) {
                    EmptyView()
                }.opacity(0) // Hiding the default navigation bar chavron

                Image(systemName: "chevron.right")
                    .foregroundColor(.secondary)
                    .font(Font.body.weight(.semibold))
            }
            .padding(.all, 16)
            .background(Color("CustomCardBackgroundColor")) // This is a custom color set
        }
        .cornerRadius(10)
        .overlay(
            RoundedRectangle(cornerRadius: 10)
                .stroke(Color(.sRGB, red: 150/255, green: 150/255, blue: 150/255, opacity: 0.1), lineWidth: 1)
        )
    }
}

Answer 1

这是由于 List 的设计造成的;当您单击一行时，整行都会突出显示。这不是一个可配置的设置，至少目前是这样。

一种选择是替换 List { ... }与 ScrollView { VStack { ... } } .这还需要您移动您的 NavigationLink到您的Card的顶层查看，设置一个PlainButtonStyle在 NavigationLink 上所以它不会把你的图像变成蓝色，并在边缘添加一些填充。

请注意，您将无法设置单元格后面的背景颜色。这里有一个couple questions试图解决它，但我无法成功地将这些方法中的任何一种与您的观点结合起来。现在，您可能只需要选择您更喜欢的:自定义背景颜色，或仅应用于卡片的点击颜色。

struct StackOverflowTests: View {
    var body: some View {

        return NavigationView {
            // CHANGED THIS
            ScrollView {
                VStack {
                    Cards()
                    Cards()
                    Cards()
                }.padding(.horizontal)
            }

            // Navigation bar
            .navigationBarTitle(Text("Header"))
            .navigationBarItems(
                leading:
                Button(action: { print("add") }) {
                    Image(systemName: "plus")
                },
                trailing:
                Button(action: { print("edit") }) {
                    Text("Edit")
                }.disabled(true)
            )
        }
    }
}

和

// For the Cards on the main screen
struct Cards: View {
    var body: some View {
        // MOVED THIS
        NavigationLink(destination: EmptyView()) {
            VStack(spacing: 0) {
                Image("swiftui")
                    .resizable()
                    .aspectRatio(contentMode: .fit)

                HStack {
                    VStack(alignment: .leading, spacing: 0) {
                        Text("Title")
                            .font(.title)
                            .foregroundColor(.primary)
                            .lineLimit(3)
                        Text("Subtitle")
                            .font(.caption)
                            .foregroundColor(.secondary)
                    }
                    .layoutPriority(100)

                    Spacer()

                    Image(systemName: "chevron.right")
                        .foregroundColor(.secondary)
                        .font(Font.body.weight(.semibold))
                }
                .padding(.all, 16)
                    .background(Color("CustomCardBackgroundColor")) // This is a custom color set
            }
            .cornerRadius(10)
            .overlay(
                RoundedRectangle(cornerRadius: 10)
                    // ATTENTION NEEDED: You will probably need to make this border darker/wider
                    .stroke(Color(.sRGB, red: 150/255, green: 150/255, blue: 150/255, opacity: 0.1), lineWidth: 1)
            )
        }
            // ADDED THIS
            .buttonStyle(PlainButtonStyle())
    }
}