web-dev-qa-db-ja.com

SwiftUI：タップするとリスト行のハイライトの色を変更

タップしたときのリスト行のデフォルトの色は灰色です。

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

enter image description here

swiftuiswiftui-list
4
Mane Manero

最初に、リスト全体ではなく行の.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()
    }
}
1
Chuck H