[SwiftUI]リスト(List)でNavigationLinkの矢印を無くすには？

SwiftUI

2022.02.14

どうも、ちょげ(@chogetarou)です。

リストのNavigationLinkを使った要素の右側に表示される矢印を無くす方法を紹介します。

方法
使用例

方法

ListでNavigationLinkの矢印を無くすには、ZStackとopacity修飾子を使います。

まず、ZStackのクロージャーに、NavigationLinkとリストの要素を指定します。

List {
   ZStack {
       NavigationLink(destination : /*遷移先*/) { EmptyView() }
       ItemView() //リストの要素
   }
}

そして、NavigationLinkに「.opacity(0)」を付与します。

List {
   ZStack {
       NavigationLink(destination : /*遷移先*/) { EmptyView() }
           .opacity(0)
       ItemView() //リストの要素
   }
}

これでListでNavgationLinkに表示される矢印を非表示にすることができます。

iOS14では、うまく機能しない場合があります。

その場合は、NavigationLinkに「.buttonStyle(PlainButtonStyle)」を付与します。

NavigationLink(destination : DetailView(number: index)) {
    PlainButtonStyle()                         
}
.buttonStyle(PlainButtonStyle())

使用例

以下は、使用例です。

struct ContentView: View {
    
    var body: some View {
        NavigationView {
            List {
                ForEach (1..<6, id: \.self) { index in
                    ZStack {
                        NavigationLink(destination : DetailView(number: index)) {
                            EmptyView()
                        }
                        .opacity(0)
                        HStack {
                            Text("Page : \(index)")
                            Spacer()
                        }
                    }
                }
            }
        }
    }
}