如何在表单中更改 NavigationLink 箭头颜色
How to change NavigationLink arrow color within Form
在 SwiftUI 中,当将 NavigationLink 放置在 Form 中时,箭头会自动出现在 NavigationLink 的尾部。这个箭头的颜色怎么改?
struct example: View {
var body: some View {
NavigationView {
Form {
NavigationLink(destination: Text("Example destination")) {
Text("Example link")
}
}
}
}
}
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
基本上使整个单元格可点击
结果:
您可以提供自定义视图并隐藏默认的 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)
)
在 SwiftUI 中,当将 NavigationLink 放置在 Form 中时,箭头会自动出现在 NavigationLink 的尾部。这个箭头的颜色怎么改?
struct example: View {
var body: some View {
NavigationView {
Form {
NavigationLink(destination: Text("Example destination")) {
Text("Example link")
}
}
}
}
}
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
基本上使整个单元格可点击
结果:
您可以提供自定义视图并隐藏默认的 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)
)