2025/3/3

【Swift UI】NavigationLinkのアクセサリー(＞)を非表示にする方法！

この記事からわかること

SwiftUIのNavigationLinkのアクセサリーを非表示にする方法

index

[open]

NavigationLinkのアクセサリー(＞)
アクセサリーを非表示にする方法

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Xcode：16.0
iOS：18.0
Swift：5.9
macOS：Sonoma 14.6.1

NavigationLinkのアクセサリー(＞)

Swift UIのList内にNavigationLinkを設置すると画面が遷移することを表すためにアクセサリー(＞)が自動的に表示されてしまいます。これを非表示にする方法は公式では用意されていないのでカスタマイズすることで無理やり非表示にする方法を紹介します。

NavigationStack {
    List {
        Text("USA🇺🇸")
        Text("Canada🇨🇦")
        NavigationLink {
            Text("日本")
        } label: {
            Text("Japan🇯🇵")
        }
    }
}

アクセサリーを非表示にする方法

アクセサリーを非表示にする方法はZStackとopacityを掛け合わせる方法です。これによりNavigationLinkの遷移機能は保持したままにViewからアクセサリー(＞)をなくすことが可能です。

NavigationStack {
    List {
        Text("USA🇺🇸")
        Text("Canada🇨🇦")
        ZStack {
            NavigationLink {
                Text("日本")
            } label: {
                // > アクセサリを非表示にするためZStack + opacity
            }.opacity(0)
                .frame(width: 0, height: 0)
            Text("Japan🇯🇵")
        }
    }
}