列表中的 SwiftUI NavigationLink
SwiftUI NavigationLink in list
我试着做一个列表,里面有图像和导航 link。在 iOS 14.1 中,一切正常,但在我将 iOS 更新到 14.2 后,出现了问题。在列表中,当用户单击大图像时,将弹出一个动作 sheet,当用户单击系统图像时,将触发导航 link。但是,当我更新到 iOS 14.2 时,无论我点击什么,它都会触发 NavigationLink。谁能给我解释一下为什么会这样以及如何解决?
这里是示例代码
struct ContentView : View {
@State var showingActionSheet = false
@State private var action: Int? = 0
var body: some View {
NavigationView {
List{
VStack(alignment: .leading){
HStack{
VStack(alignment: .leading){
Text("my data")
Text("2020/12/12")
}
}
Image("profile")
.resizable()
.aspectRatio(contentMode: .fit)
.onTapGesture(count: 1) {
self.showingActionSheet.toggle()
}
HStack{
Image(systemName: "message")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 25)
.foregroundColor(.gray)
.onTapGesture {
self.action = 1
print("select comment")
}
NavigationLink(destination: Text("test"), tag: 1, selection: $action) {
EmptyView()
}
}
}
.actionSheet(isPresented: $showingActionSheet) {
//action sheet
ActionSheet(title: Text("Test"), message: Text("Select a selection"), buttons: [
.default(Text("test")) { print("test") },
.cancel()
])
}
}
}
}
}
您可以使用isActive
触发导航link。
@State var isCommentPresented = false
...
Image(systemName: "message")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 25)
.foregroundColor(.gray)
.onTapGesture {
self.isCommentPresented = true
print("select comment")
}
}
NavigationLink(destination: Text("test"), isActive:self.$isCommentPresented) {
EmptyView()
}
尝试以下操作(禁用导航 link 会阻止用户对其进行交互,但以编程方式激活它):
HStack{
Image(systemName: "message")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 25)
.foregroundColor(.gray)
.onTapGesture {
self.action = 1
print("select comment")
}
NavigationLink(destination: Text("test"), tag: 1, selection: $action) {
EmptyView()
}.disabled(true) // << here !!
}
最重要的是使用 Zstack 可能是原因。
没有ZStack请检查一次
我试着做一个列表,里面有图像和导航 link。在 iOS 14.1 中,一切正常,但在我将 iOS 更新到 14.2 后,出现了问题。在列表中,当用户单击大图像时,将弹出一个动作 sheet,当用户单击系统图像时,将触发导航 link。但是,当我更新到 iOS 14.2 时,无论我点击什么,它都会触发 NavigationLink。谁能给我解释一下为什么会这样以及如何解决?
这里是示例代码
struct ContentView : View {
@State var showingActionSheet = false
@State private var action: Int? = 0
var body: some View {
NavigationView {
List{
VStack(alignment: .leading){
HStack{
VStack(alignment: .leading){
Text("my data")
Text("2020/12/12")
}
}
Image("profile")
.resizable()
.aspectRatio(contentMode: .fit)
.onTapGesture(count: 1) {
self.showingActionSheet.toggle()
}
HStack{
Image(systemName: "message")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 25)
.foregroundColor(.gray)
.onTapGesture {
self.action = 1
print("select comment")
}
NavigationLink(destination: Text("test"), tag: 1, selection: $action) {
EmptyView()
}
}
}
.actionSheet(isPresented: $showingActionSheet) {
//action sheet
ActionSheet(title: Text("Test"), message: Text("Select a selection"), buttons: [
.default(Text("test")) { print("test") },
.cancel()
])
}
}
}
}
}
您可以使用isActive
触发导航link。
@State var isCommentPresented = false
...
Image(systemName: "message")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 25)
.foregroundColor(.gray)
.onTapGesture {
self.isCommentPresented = true
print("select comment")
}
}
NavigationLink(destination: Text("test"), isActive:self.$isCommentPresented) {
EmptyView()
}
尝试以下操作(禁用导航 link 会阻止用户对其进行交互,但以编程方式激活它):
HStack{
Image(systemName: "message")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 25)
.foregroundColor(.gray)
.onTapGesture {
self.action = 1
print("select comment")
}
NavigationLink(destination: Text("test"), tag: 1, selection: $action) {
EmptyView()
}.disabled(true) // << here !!
}
最重要的是使用 Zstack 可能是原因。 没有ZStack请检查一次