[WatchOS][SwiftUI] NavigationLink - PlainButtonStyle()

 

📚 WatchOS - SwiftUI

NavigationLink - PlainButtonStyle로 버튼의 시각적 요소 적용 X

 

 

PlainButtonStyle()

모든 OS에서 공통으로 사용할 수 있는 버튼 스타일로, 유휴 상태(IDLE)에서는 버튼의 콘텐츠에 어떠한 시작적 요소도 적용하지 않음

 

 

WatchOS를 개발하던중

VGrid안에 ForEach문으로 데이터들의 List를 보여주고,

각 Cell들을 NavigationLink로 연결시켜주는 작업을 했다.

 

먼저 CellView를 그리는 작업을 먼저 했고, 이후 NavigationLink로 DetailView로 넘어가게 수정하였다.

import SwiftUI

struct WatchMarkerListView: View {
    
    let tempData = ["추가1", "추가2", "추가3"]
    
    let columns = [
        GridItem(.flexible())
    ]
    
    var body: some View {
        NavigationView {
            VStack{
               
                ScrollView{
                    HStack {
                        Text("마커 관리")
                            .bold()
                            .padding([.leading, .bottom])
                        
                        Spacer()
                    }
                    
                    LazyVGrid(columns: columns, spacing: 10) {
                        ForEach(tempData, id: \.self) { item in
                            WatchMarkerListCellView(data: item)
                        }
                    }
                    .padding(.horizontal)
                    
                }
            }
        }
    }
}

 

이렇게 연결하였더니,

기존에 그렸던 Cell뒤에 배경화면 영역이 자동으로 잡혔다.

 

 

저기 회색영역을 없애고 싶어서 찾아보니

 

SwiftUI에서 NavigationLink는 기본적으로 내부에 있는 모든 뷰를 탭 가능한 영역으로 만들기 때문에, NavigationLink가 포함된 WatchMarkerListCellView의 전체 영역이 탭 가능한 버튼으로 처리된다고 한다. 이로 인해 배경이 있는 모든 영역이 탭 가능한 버튼으로 인식되는 문제가 발생하는 것이다.

해결 방법으로는 NavigationLink를 포함하는 부분을 특정 요소로 제한하여 해결한다.

 

import SwiftUI

struct WatchMarkerListView: View {
    
    let tempData = ["추가1", "추가2", "추가3"]
    
    let columns = [
        GridItem(.flexible())
    ]
    
    var body: some View {
        NavigationView {
            VStack {
                ScrollView {
                    HStack {
                        Text("마커 관리")
                            .bold()
                            .padding([.leading, .bottom])
                        
                        Spacer()
                    }
                    
                    LazyVGrid(columns: columns, spacing: 10) {
                        ForEach(tempData, id: \.self) { item in
                            NavigationLink(destination: DetailView(data: item)) {
                                WatchMarkerListCellView(data: item)
                            }
                            .buttonStyle(PlainButtonStyle()) // <- 이 부분을 추가해 탭 가능 영역을 제한합니다.
                        }
                    }
                    .padding(.horizontal)
                }
            }
            .navigationTitle("마커 관리")
        }
    }
}

 

 

.buttonStyle(PlainButtonStyle())을 추가한 이후