显示视图时隐藏NavigationLink上的a形/箭头,SwiftUI

xcitsw88  于 2023-01-12  发布在  Swift
关注(0)|答案(4)|浏览(266)

我正在尝试删除屏幕右侧的chevron,它带有一个包含视图的navigationLink。下面是我的代码:

NavigationView {
        List {
             NavigationLink(destination: DynamicList()) {
                  ResultCard()
             }
      ...
      }

关于堆栈溢出的其他答案建议使用类似下面的方法:

NavigationLink(...)
   .opacity(0)

然而,这在我的情况下不起作用,因为把不透明度降低到0也会删除我试图显示的视图。这也是与'. hidden'的情况。我已经到处寻找,唯一的 * 有点 * 工作的解决方案,我可以找到的是改变填充,以'推'的人字形了一边。但是这是一个差的解决方案,因为“ResultCard”视图在不同的显示器尺寸上将显得不稳定/偏离中心。
也许不可能删除V形符号--如果是这样的话,有没有其他方法可以允许用户点击“结果卡”视图并被带到一个新页面,而不是通过导航链接?
我的头撞在墙上,所以任何想法都非常感谢。

oyjwcjzk

oyjwcjzk1#

您可以在标签视图中将.overlay与标签设置为EmptyView()NavigationLink一起使用:

struct ContentView : View {
    var body: some View {
        NavigationView {
            List {
                NavigationLink("Link 1", destination: Text("Hi"))
                Text("Test")
                    .overlay(NavigationLink(destination: Text("Test"), label: {
                        EmptyView()
                    }))
            }
        }
    }
}

更新:另一种解决方案,似乎适用于除文本之外的其他类型的视图:

struct ContentView : View {
    @State private var linkActive = false
    
    var body: some View {
        NavigationView {
            List {
                NavigationLink("Link 1", destination: Text("Hi"))
                Button(action: { linkActive = true }) {
                    Image(systemName: "pencil")
                }.overlay(VStack {
                    if linkActive {
                        NavigationLink(destination: Text("Test"), isActive: $linkActive) {
                            EmptyView()
                        }.opacity(0)
                    }
                })
            }
        }
    }
}
nuypyhwy

nuypyhwy2#

jnpdx的Update解决方案 * 几乎 * 对我有效,但是它把动画转换到下一个视图的过程搞得一团糟。以下是对我有效的解决方案(实际上比jnpdx的答案简单):

struct ContentView : View {
    @State private var linkActive = false
    
    var body: some View {
        NavigationView {
            List {
                Button(action: { linkActive = true }) {
                    Image(systemName: "pencil")
                }.overlay(
                    NavigationLink(
                        isActive: $linkActive,
                        destination: { Text("Test") },
                        label: { EmptyView() }
                    ).opacity(0)
                )
            }
        }
    }
}
h4cxqtbf

h4cxqtbf3#

下面是使用. background()的两个替代变体:

// Replicate the iPhone Favorites tab with the info button
// - Compose a button to link from a NavigationView to a next view
// - Use this when you want to hide the navigation chevron decoration
// - and/or to have a button trigger the link

struct NavigationLinkButton<Destination: View, Label: View>: View {
    @Binding var selectedID: String?
    @State var rowID: String
    @ViewBuilder var destination: () -> Destination
    @ViewBuilder var label: () -> Label

    var body: some View {
        HStack {
            Spacer()
            Button {
                selectedID = rowID
            } label: {
                label()
            }
            .buttonStyle(.plain) // prevent List from processing *all* buttons in the row
            .background {
                NavigationLink("", tag: rowID, selection: $selectedID) {
                    destination()
                }
                .hidden()
            }
        }
    }
}
// Replicate the iOS Spotlight search for contacts with action buttons
// - Compose a list row to link from a NavigationView to a next view
// - Use this when you want to hide the navigation chevron decoration
// - and add action buttons

struct NavigationLinkRowHidingChevron<Destination: View, Label: View>: View {
    @Binding var selectedID: String?
    @State var rowID: String
    @ViewBuilder var destination: () -> Destination
    @ViewBuilder var label: () -> Label

    var body: some View {
        ZStack {
            // Transparent button to capture taps across the entire row
            Button("") {
                selectedID = rowID
            }
            label()
        }
        .background {
            NavigationLink("", tag: rowID, selection: $selectedID) {
                destination()
            }
            .hidden()
        }
    }
}
// Example Usages
//
// @State private var selectedID: String?
// @State private var editMode: EditMode = .inactive
//
// ... and then in the body:
// List {
//    ForEach(items) { item in
//        row(for: item)
//            .swipeActions(edge: .leading, allowsFullSwipe: true) {
//                ...
//            }
//            .contextMenu {
//                ...
//            }
//            .onDrag({
//                ...
//            })
//            // Overlay so that a tap on the entire row will work except for these buttons
//            .overlay {
//                // Hide info button just as with Phone Favorites edit button
//                if editMode == .inactive {
//                    NavigationLinkHidingChevron(selectedID: $selectedID, rowID: item.id) {
//                        // Destination view such as Detail(for: item)
//                    } label: {
//                        // Button to activate nav link such as an 􀅴 button
//                    }
//                }
//            }
//    }
//    .onDelete(perform: deleteItems)
//    .onMove(perform: moveItems)
// }
//
// ... or this in the body:
// NavigationLinkHidingChevron(selectedID: $selectedID, rowID: contact.id) {
//    // Destination view such as Detail(for: item)
// } label: {
//    // Content for the list row
// }
// .contextMenu {
//    ...
// }
// .overlay {
//    HStack(spacing: 15) {
//        // Right-justify the buttons
//        Spacer()
//        // Buttons that replace the chevron and take precedence over the row link
//    }
// }
x9ybnkn6

x9ybnkn64#

这对我很有效,它基于@ wristband的解决方案,并针对使用Xcode 14.1的iOS 16:

struct ContentView : View {
    var body: some View {
        NavigationStack {
            List {
                Text("View")    // your view here
                .overlay {
                    NavigationLink(destination: { Text("Test") }, 
                                   label: { EmptyView() })
                        .opacity(0)
                }
            }
        }
    }
}

相关问题