SwiftUI：点击时更改列表行突出显示颜色

Question

点击时列表行的默认颜色为灰色。

我知道如何使用 .listRowBackground 更改背景颜色，但随后它会更改为整个列表。

如何在点击时更改为自定义颜色，以便只有被点击的行保持红色？

import SwiftUI

struct ExampleView: View {
    @State private var fruits = ["Apple", "Banana", "Grapes", "Peach"]

    var body: some View {
        NavigationView {
            List {
                ForEach(fruits, id: \.self) { fruit in
                    Text(fruit)
                }
                .listRowBackground(Color.red)

            }


        }
    }


}

struct ExampleView_Previews: PreviewProvider {
    static var previews: some View {
        ExampleView()
    }
}

Answer 1

首先，您需要在行上使用 .ListRowBackground 修饰符而不是整个列表，然后使用它有条件地设置每一行的行背景颜色。如果将点击行的 ID 保存在 @State 变量中，则可以根据选择状态将行设置为红色或默认颜色。这是代码：

import SwiftUI

struct ContentView: View {
    @State private var fruits = ["Apple", "Banana", "Grapes", "Peach"]
    @State private var selectedFruit: String?

    var body: some View {
        NavigationView {
            List {
                ForEach(fruits, id: \.self) { fruit in
                    Text(fruit)
                        .onTapGesture {
                            self.selectedFruit = fruit
                    }
                    .listRowBackground(self.selectedFruit == fruit ? Color.red : Color(UIColor.systemGroupedBackground))
                }
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 2

关注@Chuck H，

我在用着：

        List {
            ForEach(viewModel.sharingGroups, id: \.self) { group in
                Button(action: {
                    self.selectedGroup = group
                }, label: {
                    Text(group.name)
                })
                .listRowBackground(self.selectedGroup == group ? Color.gray : Color(UIColor.systemGroupedBackground))
            }
        }

如果直接使用按钮而不是文本，这使我能够点击行上的任意位置，而不仅仅是文本。