如何在表单中更改NavigationLink箭头颜色

Question

在SwiftUI中，将NavigationLink放置在窗体内时，箭头会自动出现在NavigationLink的尾端。该箭头的颜色如何更改？

struct example: View {
    var body: some View {
        NavigationView {
            Form {
                NavigationLink(destination: Text("Example destination")) {
                    Text("Example link")
                }
            }
        }
    }
}

Answer 1

Form / List在重用UITableView，更改公开指标tintColor一直是一个问题。 ^{*请参阅：Question}
因此，.accentColor在这里也不起作用也就不足为奇了。

建议主要是将其替换为自定义视图。
因此，让我们在SwiftUI中进行相同的操作。

解决方案：

struct ContentView: View {
  var body: some View {
    NavigationView {
      Form {
        //Overlap NavigationLink and our Custom Cell arrangement
        ZStack {
          //Create a NavigationLink without the disclosure indicator
          NavigationLink(destination: Text("Hello, World!")) {
            EmptyView()
          }

          //Replicate the default cell
          HStack {
            Text("Custom UI")
            Spacer()
            Image(systemName: "chevron.right")
              .resizable()
              .aspectRatio(contentMode: .fit)
              .frame(width: 7)
              .foregroundColor(.red) //Apply color for arrow only
          }
          .foregroundColor(.purple) //Optional: Apply color on all inner elements
        }

        //Default style
        NavigationLink(destination: Text("Hello, World!")) {
          Text("Default UI")
        }
      }
    }
  }
}

• NavigationLink和EmptyView摆脱了默认的披露指标
• HStack是我们的自定义单元格View，它复制默认单元格排列
  • Image(systemName: "chevron.right")是我们替代封顶指示器的一种方法
  • .foregroundColor将使我们能够在整个HStack或仅Image（您的选择）上飞溅一种颜色
• ZStack允许将以上两个重叠。
  • NavigationLink基本上可以轻敲整个单元格

结果：

Answer 2

您可以提供自定义视图并隐藏默认的 NavigationLink 箭头：

       NavigationLink(destination: Text("Hello, World!")) {}
       .opacity(0)
       .background(
         HStack {
            Text("Custom UI")
            Spacer()
            Image(systemName: "chevron.right")
              .resizable()
              .aspectRatio(contentMode: .fit)
              .frame(width: 7)
              .foregroundColor(.red) //Apply color for arrow only
          }
          .foregroundColor(.purple)
       ) 

或者将 NavigationLink 指定为背景（这样您就可以自动调整大小）：

         HStack {
            Text("Custom UI")
            Spacer()
            Image(systemName: "chevron.right")
              .resizable()
              .aspectRatio(contentMode: .fit)
              .frame(width: 7)
              .foregroundColor(.red) //Apply color for arrow only
          }
          .foregroundColor(.purple)
          .background(
             NavigationLink(destination: Text("Hello, World!")) {}
                .opacity(0)
          )