SwiftUI NavigationLink 隐藏箭头

Question

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

我想使用 NavigationView -> List -> HStack -> NavigationLink_1 - NavigationLink_2 显示图像网格

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

Answer 1

它对我有用的方式：

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

Answer 2

我发现的最简单的方法是将导航放在

.background

修改器中，且

opacity

为零：

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

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

奖励：使用

.overlay

修饰符也有效！

Answer 3

我用这个完成了

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

Answer 4

唯一对我有帮助的就是将

.opacity(0)

添加到 NavigationLink，如下所示：

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

Answer 5

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

Answer 6

@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 7

在

.opacity(0)

上设置

NavigationLink

对我来说似乎是最可靠的解决方案，因为我注意到在弄乱

.listStyle

属性时它可能会再次显示指示器。您也不会失去突出显示的效果。

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

                    Text(item.value)
                }
            }
        }
    }
}

Answer 8

这对我有用，只需在

NavigationLink

 中添加一个空的

ZStack

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

Answer 9

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

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 10

虽然

.background(...).opacity(0)

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

如果您需要它在

List

内，对我有用的是将

NavigationLink

标记为

.disabled(true)

：

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

Answer 11

使用

.background

修饰符。

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

Answer 12

终于找到了一种避免 V 形图案的方法，而无需执行一些棘手的

ZStacks

和其他解决方案。唯一的缺点是，这仅在 iOS 16 上使用新的

NavigationPath

+

NavigationStack

进行了测试。

您只需使用常规

NavigationLink

并将对象附加到

hashable

，而不是使用常规

Button

来应用

NavigationPath

对象。

示例：

@State private var path = NavigationPath()

var body: some View {
    List {
        ForEach(viewModel.customers) { customer in
            Button {
                path.append(customer)
            } label: {
                CustomerCell(customer: customer)
            }
        }
    }
    .navigationDestination(for: Customer.self) { customer in
        CustomerView(customer: customer)
    }
}

对于使用 NavigationBackport（用于准备新导航）的项目，它也可能有效。您可以使用

NBNavigationPath

并将对象附加到带有

Button

的路径，就像上面的示例一样。

Answer 13

我最近也遇到了这个问题，我想我已经通过使用导航链接的自定义视图找到了解决方案（它对我有用）：

struct CustomNavigationLink<D: View, L: View>: View {
  @ViewBuilder var destination: () -> D
  @ViewBuilder var label: () -> L
  
  @State private var isActive = false
  
  var body: some View {
    Button {
      withAnimation {
        isActive = true
      }
    } label: {
      label()
    }
    .onAppear {
      isActive = false
    }
    .overlay {
      NavigationLink(isActive: $isActive) {
        destination()
      } label: {
        EmptyView()
      }
      .opacity(0)
    }
  }
}

你这样使用：

CustomNavigationLink {
  SomeViewHere()
} label: {
  Text("hello world")
}

Answer 14

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

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 15

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

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 16

有很多使用

ZStack

和

.opacity

的例子，但在我看来，SwiftUI 可以使用

NavigationLink

和

isActive

参数提供更优雅的解决方案，与

.listRowSeparator

或

.listStyle

修饰符完美配合：

struct HidingNavArrowInList: View {
    
    let planets = ["Mars", "Sun", "Mercury", "Venus", "Jupiter", "Uranus", "Saturn", "Earth"]
    
    @State var selectedPlanet: String?
    @State var showDetailView = false
    
    var body: some View {
        NavigationView {
            List {
                ForEach(planets, id: \.self) { planet in
                    Text(planet)
                        .onTapGesture {
                            segue(planet: planet)
                        }
                }
            }
            .background(
                NavigationLink(isActive: $showDetailView, destination: {
                    if let unwrappedPlanet = selectedPlanet {
                        VStack {
                            Text("This is detail view of \(unwrappedPlanet)")
                        }
                    }
                }, label: {
                    EmptyView()
                })
            )
        }
    }
    
    private func segue(planet: String) {
        selectedPlanet = planet
        showDetailView.toggle()
    }
}

Answer 17

2023更新

这个简单的解决方案对我有用：

ZStack {
    CustomCell()  
    NavigationLink(destination: DetailView()) {
     EmptyView()
    }
    .opacity(0)
}

Answer 18

就我而言，前景色修饰符对我有用。

NavigationLink(EmptyView(), label: {
//place your custom view
    Text("your Label")
}).buttonStyle(PlainButtonStyle()).foregroundColor(Color.clear)

Answer 19

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

@State var boolValue: Bool = false


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

Answer 20

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

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

Answer 21

我将

opacity

的

navigationLink

设置为零，它就像一个魅力

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

SwiftUI NavigationLink 隐藏箭头

问题描述投票：0回答：21

21个回答

示例：

最新问题

SwiftUI NavigationLink 隐藏箭头

问题描述 投票：0回答：21

21个回答

示例：

最新问题

问题描述投票：0回答：21