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

Answer 2

发生这种情况是因为您的填充

.padding(.bottom, -32)

在列表上。

SwiftUI：如何更改用户按住导航链接或按钮之类的颜色时发生的颜色变化？

2 个答案: