[SwiftUI]リスト(List)のNavigationLinkの矢印(arrow)の色(color)を変えるには？

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

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

方法
使用例

方法

ListでNavigationLinkの矢印の色を変えるには、ZStackとImageを使います。

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

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

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

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

最後に、リストの要素の右側にImageで矢印のアイコンを配置し、foregroundColor修飾子で色を指定します。

ZStack {
    NavigationLink(destination : /*遷移先*/) { EmptyView() }
           .opacity(0)
    HStack {
         ItemView()
         Spacer()
         Image(systemName: "chevron.right")
            .foregroundColor(/*矢印の色*/)
    }
}

これでNavigationLinkの矢印の色を変えることができます。

tint修飾子やaccentColor修飾子では、矢印の色を変えられません。

なので、ZStackで上から色を変えた矢印を被せます。

使用例

以下は、使用例です。

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()
                            Image(systemName: "chevron.right")
                                .resizable()
                                .aspectRatio(contentMode: .fit)
                                .frame(width: 7)
                                .foregroundColor(.red)
                        }
                    }
                }
            }
        }
    }
}