SwiftUI NavigationLink 隐藏箭头

Question

有没有办法隐藏自动添加的导航 link 视图右侧的箭头？

我想使用 NavigationView -> List -> HStack -> NavigationLink_1 - NavigationLink_2

显示图像网格

导航链接有箭头，看起来很奇怪

Answer 1

@State var selection: Int? = nil

var body: some View {
    let navigation = NavigationLink(destination: Text("View"), tag: 1, selection: $selection) { EmptyView() }
    return 
        VStack { 
            navigation
            Text("Tap").onTapGesture { self.selection = 1 }
        }
}

Answer 2

它对我有用的方式：

List { 
    ForEach(elements) { element in
        ZStack {
            CustomView(element: element)
            NavigationLink(destination: DestinationView()) {
                EmptyView()
            }.buttonStyle(PlainButtonStyle())
        }
    }
}

Answer 3

您也可以这样做：这对我有用，

@State var boolValue: Bool = false


                HStack {
                    Text("Your text")
                    Toggle(isOn: $boolValue){
                        Text("")
                    }
                    if boolValue {
                        NavigationLink(destination: DestinationView()) {
                            EmptyView()
                        }.frame(width: 0)
                    }
                }

Answer 4

它也适用于任何视图（不仅是文本）

ZStack {
    Text("Some text")
    NavigationLink(destination: Text("Hello")) { 
            EmptyView()
    }.frame(width: 0)
}

Answer 5

我完成了这个

NavigationLink(destination: DestinationView()) {
      EmptyView()
}
.frame(width: 0, height: 0)
.hidden()

Answer 6

唯一对我有帮助的是像这样将 .opacity(0) 添加到 NavigationLink：

List { 
    ForEach(elements) { element in
        ZStack {
            CustomView(element: element)
            NavigationLink(destination: DestinationView()), 
            label: {}).opacity(0)
        }
    }
}

Answer 7

这对我有用，只需在 ZStack

中添加一个空的 NavigationLink

List(viewModel.items, id: \.id) { item in
    ZStack {
        NavigationLink(destination: Destination()) {}
        CustomView(item: item)
    }
}

Answer 8

当我尝试在列表中的行内实现按钮点击时，只有这个对我有用：

ZStack {
                NavigationLink(destination: FlightBoardInformation(flight: flight), tag: FlightBoardNavigation.toFlightDetailed, selection: $navigation) {
                    EmptyView()
                }
                .frame(width: 0, height: 0)
                .hidden()
                .disabled(true)
                Button(action: {
                        self.navigation = .toFlightDetailed
                }) {
                    Text("\(self.flight.airline) \(self.flight.number)")
                }.buttonStyle(PlainButtonStyle())
            }

Answer 9

对我来说最好的解决方法是使用 background:

NavigationLink(...) {}
       .opacity(0)
       .background(
         HStack {
           Text("Your custom view without arrow")
         }
       )

或者，如果您需要@turingtested 发布的动态高度，请使用 NavigationLink 作为背景

Text("Your custom view without arrow")
        .background(NavigationLink( ... ) {}.opacity(0))

Answer 10

我发现的最简单的方法是将导航放在 .background 修饰符中，opacity 为零：

List {
    Text("The cell")
        .background( NavigationLink("", destination: Text("The detail view controller")).opacity(0) )
}

使用此解决方案，您不会失去单元格的动态高度功能。

Answer 11

虽然 .background(...).opacity(0) 有效，但在更复杂的视图中，它会在所有视图中扩展自身并与按钮等其他元素发生冲突。

如果你在 List 中需要它，对我有用的是将 NavigationLink 标记为 .disabled(true):

    Text(...)
      .background( NavigationLink(...).opacity(0).disabled(true) )

Answer 12

我将 navigationLink 的 opacity 设置为零，效果非常好

NavigationLink(
    destination: Text("Destination"),
    label: {}
).opacity(0)

Answer 13

List { 
    ForEach(elements) { element in
        ZStack {
            CustomView(element: element)
            NavigationLink(destination: DestinationView()) {
                EmptyView()
            }.opacity(0.0)
        }
    }
}

Answer 14

尽管有很多解决方案。我正在发布我的。

var body: some View {
    VStack{
        List{
            ForEach (items){item in
                switch item.onClick {
                    //For SettingsOverviewView
                case .Settings:
                    ZStack{
                        NavigationLink (destination: SettingsMenuView(item: item)){
                            EmptyView()
                        }
                        .opacity(0.0)
                        .buttonStyle(PlainButtonStyle())
                        
                        //some views that you will show as your listItem
                        HStack {
                           Text(item.name)
                              .font(.body)
                           Spacer()
                        }
                    }
                }
            }
            .listStyle(GroupedListStyle())
        }
    }
}

Answer 15

在 NavigationLink 上设置 .opacity(0) 对我来说似乎是最可靠的解决方案，因为我注意到当弄乱 .listStyle [=16= 时它可能会再次显示指标].你也不会失去突出显示的效果。

var body: some View {
    NavigationView {
        List {
            ForEach(items) { item in
                ZStack(alignment: .leading) {
                    NavigationLink(destination: EmptyView()) {
                        EmptyView()
                    }
                    .opacity(0)

                    Text(item.value)
                }
            }
        }
    }
}

Answer 16

尝试更改您的视图层次结构。而不是使用 List，而是使用嵌入 VStack 中的 ScrollView。使用 ForEach 遍历数据：

NavigationView -> VStack -> ScrollView -> ForEach -> NavigationLink

我在 Apple Developer 的网站上看到了这个。您可以在第 5 部分找到相关信息：https://developer.apple.com/tutorials/swiftui/composing-complex-interfaces

我的经验：

层次结构错误 bad one

好的 good one

Answer 17

使用 .background 修饰符。

ForEach(elements) { e in
  AnyViewYouWantToShow(e)
    .background(
      NavigationLink("", destination: DestinationView()))
        .opacity(0)
    )
}

SwiftUI NavigationLink 隐藏箭头

SwiftUI NavigationLink Hide Arrow

swiftui

navigationview