Кнопки внутри элемента списка не работают должным образом

Question

У меня есть 2 просмотра: PollCard и PollList (например, список опросов)
В представлении PollCard у меня есть 2 кнопки (изображения), которые вызывают функцию «ответа»:

HStack{
    Button(action: {
        self.answer()
        print("Pressed first image")
    }){
        Image(poll.v1img)
            .resizable()
            .renderingMode(.original)
            .scaledToFill()
            .frame(width: 150, height: 200)
    }.frame(width: 150, height: 200)
    Button(action: {  self.answer()}){
        Image(poll.v2img )
            .resizable()
            .renderingMode(.original)
            .frame(width: 150, height: 200)
    }.frame(width: 150, height: 200).zIndex(4)
}

В PollList просмотр У меня есть этот простой список:

var body: some View {
    HStack{
        List(pollData) { poll in
            PollCard(poll: poll)
            }.padding()
    }
}

Но когда я щелкаю изображения в списке, он выбирает как все изображения и нажимает его
Это также очень легко проверить - терминал печатает Pressed first image, даже если я нажал только второе изображение

Что мне сделать, чтобы это исправить?

Answer 1

Как я уже упоминал в разделе комментариев, обходной путь должен был бы заменить HStack вокруг List на ScrollView и List на ForEach:

struct ContentView: View {

    struct Data: Identifiable {
        var id: Int
    }

    @State var data = [Data(id: 0), Data(id: 1), Data(id: 2), Data(id: 3), Data(id: 4), Data(id: 5)]

    var body: some View {
        ScrollView {
            ForEach(self.data) { data in
                HStack {
                    Button(action: {
                        print("Pressed blue...")
                    }, label: {
                        Rectangle()
                            .foregroundColor(Color.blue)
                            .frame(width: 150, height: 200)
                    })
                    Button(action: {
                        print("Pressed red...")
                    }, label: {
                        Rectangle()
                            .foregroundColor(Color.red)
                            .frame(width: 150, height: 200)
                    })
                }
            }
        }
    }
}

Надеюсь, это поможет!

Answer 2

это неожиданное поведение Button (или это ошибка?) В текущем SwiftUI (либо на macOS, либо на iOS).

Обходной путь в вашем случае прост, попробуйте применить PlainButtonStyle для Ваши кнопки

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            Text("Hello, World!")
            HStack {
                Button(action: {
                    print("button1")
                }) {
                    Color.yellow
                }.buttonStyle(PlainButtonStyle())

                Button(action: {
                    print("button2")
                }) {
                    Color.green
                }.buttonStyle(PlainButtonStyle())
            }
        }
    }
}

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

Самое смешное, что достаточно применить стиль только к одной кнопке ... или применить его к родительскому HStack: -)

, меняя ContentView ...

struct ContentView: View {
    var body: some View {
        List {
            Text("Hello, World!")

            HStack {
                Button(action: {
                    print("button1")
                }) {
                    Color.yellow
                }

                Button(action: {
                    print("button2")
                }) {
                    Color.green
                }
            }
            .buttonStyle(PlainButtonStyle())
            .frame(height: 100)

            Text("By by, World!")
        }
    }
}

вы получаете

, где каждая из кнопок работает как положено