SwiftUI에서 List 위에 Button을 두면 탭 이벤트가 List 쪽에서 실행됩니다. 따라서 Button 스타일을 BorderlessButtonStyle 또는 PlainButtonStyle로 설정해야합니다.

(이 기사는 Xcode 12.4의 SwiftUI에서의 이야기입니다)

주제

해결 방법

Button으로 BorderlessButtonStyle 또는 PlainButtonStyle 스타일 설정

//: A UIKit based Playground for presenting user interface

import UIKit
import SwiftUI
import PlaygroundSupport

struct ContentView: View {
    var body: some View {
        List {
            HStack {
                Text("Cell 1")

                Spacer()

                Button(action: {
                    print("B_1押したね")
                }, label: {
                    Text("Border")
                })
                .buttonStyle(BorderlessButtonStyle())

                Button(action: {
                    print("P_1押したね")
                }, label: {
                    Text("Plain")
                })
                .buttonStyle(PlainButtonStyle())
            }
        }
    }
}

PlaygroundPage.current.liveView = UIHostingController(rootView: ContentView())

이것으로 해결. 탭 이벤트는 List가 아닌 버튼으로 반응하게 되었다.

디자인적인 것은 Button이 아니라 내부의 Text에 적용해 가면 좋다.

사족: 왜 Button 스타일로 판단하는지 생각

모든 스타일을 적용해보기

그 밖에도 DefaultButtonStyle라고 하는 것이 있으므로 그것도 적용해 본다. 결과는 List를 탭할 수 있게 되어 버린다. 즉 이것이 기본인가?

//: A UIKit based Playground for presenting user interface

import UIKit
import SwiftUI
import PlaygroundSupport

struct ContentView: View {
    var body: some View {
        List {
            HStack {
                Text("Cell 1")

                Spacer()

                Button(action: {
                    print("B_1押したね")
                }, label: {
                    Text("Border")
                })
                .buttonStyle(BorderlessButtonStyle())

                Button(action: {
                    print("P_1押したね")
                }, label: {
                    Text("Plain")
                })
                .buttonStyle(PlainButtonStyle())

                Button(action: {
                    print("D_1押したね")
                }, label: {
                    Text("Default")
                })
                .buttonStyle(DefaultButtonStyle())
            }
        }
    }
}

PlaygroundPage.current.liveView = UIHostingController(rootView: ContentView())

왜 Button 스타일로 판단하는지

List에는 여러 Section이나 View(Cell/Item)가 필요하기 때문에 List의 스타일로 통일적으로 지정하기 힘들다

1 행째라든지 지정하는 형태로 해 버리면 할 수 있다고 생각하지만 그것도 복잡하고 어떨까 생각한다

내부 View 상태에서 판단하려고합니다

구체적으로는 List가 2행으로 되어 있는 경우, 1행째는 Cell에는 탭할 수 없지만, 2행째는 Cell에도 탭할 수 있다.

//: A UIKit based Playground for presenting user interface

import UIKit
import SwiftUI
import PlaygroundSupport

struct ContentView: View {
    var body: some View {
        List {
            HStack {
                Text("Cell 1")

                Spacer()

                Button(action: {
                    print("B_1押したね")
                }, label: {
                    Text("Border")
                })
                .buttonStyle(BorderlessButtonStyle())

                Button(action: {
                    print("P_1押したね")
                }, label: {
                    Text("Plain")
                })
                .buttonStyle(PlainButtonStyle())
            }

            HStack {
                Text("Cell 2")

                Spacer()

                Button(action: {
                    print("D_2押したね")
                }, label: {
                    Text("Default")
                })
                .buttonStyle(DefaultButtonStyle())
            }
        }
    }
}

PlaygroundPage.current.liveView = UIHostingController(rootView: ContentView())