如何在不更改 UI 的情况下添加 NavigationLink？

Posted 2023-02-24

【中文标题】如何在不更改 UI 的情况下添加 NavigationLink？

【英文标题】：How can I add a NavigationLink without changing my UI?

【发布时间】：2019-11-14 19:37:57

【问题描述】：

我的问题是如何在不更改 UI 的情况下将 NavigationLink 添加到下面的代码中。我尝试了几个小时，但不幸的是没有成功。因此，如果有人可以帮助我，那就太好了。我还找到了this，但不幸的是，答案对我不起作用。也许我做错了什么

import SwiftUI

struct ContentView: View 
    var body: some View 
        UITableView.appearance().separatorStyle = .none

        return NavigationView 
            List 
                CardView()
                    .listRowInsets(EdgeInsets())
            
            .navigationBarTitle("Title")
        
    


struct CardView: View 
    var body: some View 
        VStack 
            // NavigationLink(destination: EmptyView()) 
                Image("Image")
                    .resizable()
                    .aspectRatio(contentMode: .fit)

                HStack 
                    VStack(alignment: .leading) 
                        Text("Title")
                            .font(.system(size: 20))
                            .fontWeight(.semibold)
                            .foregroundColor(.primary)
                            .lineLimit(3)
                        Text("Subtitle")
                            .font(.caption)
                            .foregroundColor(.secondary)
                    
                    .layoutPriority(100)

                    Spacer()
                    Image(systemName: SFSymbolName.chevron_right)
                        .foregroundColor(.secondary)
                        .font(Font.body.weight(.semibold))
                
                .padding([.leading, .bottom, .trailing], 16)
                .padding(.top, 5)
            // 
        
        .background(Color("CustomCardViewColor"))
        .cornerRadius(10)
        .padding(.all, 0.1)
        .overlay(
            RoundedRectangle(cornerRadius: 10)
                .stroke(Color(.sRGB, red: 150/255, green: 150/255, blue: 150/255, opacity: 0.1), lineWidth: 1)
        )
        .padding([.top, .leading, .trailing])
    

【参考方案1】：

您的 UI 发生巨大变化的原因是 NavigationLink 将其内容包装在隐式 HStack 中，将您的 Image 放在您的 HStack 的左侧。您有多种选择，具体取决于您是要使用自动披露 V 形还是您自己的样式。

使用系统人字形：

HStack 
    VStack(alignment: .leading) 
        Text("Title")
            .font(.system(size: 20))
            .fontWeight(.semibold)
            .foregroundColor(.primary)
            .lineLimit(3)
        Text("Subtitle")
            .font(.caption)
            .foregroundColor(.secondary)
    
    .layoutPriority(100)

    Spacer()

    // this simply places the chevron approximately where yours is
    NavigationLink(destination: EmptyView()) 
        EmptyView()
    

如果你想要自己的：

HStack 
    VStack(alignment: .leading) 
        Text("Title")
            .font(.system(size: 20))
            .fontWeight(.semibold)
            .foregroundColor(.primary)
            .lineLimit(3)
        Text("Subtitle")
            .font(.caption)
            .foregroundColor(.secondary)
    
    .layoutPriority(100)

    Spacer()

    // this hidden NavigationLink makes the whole row clickable
    NavigationLink(destination: EmptyView()) 
        EmptyView()
    .opacity(0)

    // your chevron is displayed
    Image(systemName:  SFSymbolName.chevron_right)
        .foregroundColor(.secondary)
        .font(Font.body.weight(.semibold))

上面是系统人字形，下面是你的

【参考方案2】：

您可以将它包裹在 chevron_right 的图像周围。所以你可以点击它进入下一页

  HStack 
                VStack(alignment: .leading) 
                    Text("Title")
                        .font(.system(size: 20))
                        .fontWeight(.semibold)
                        .foregroundColor(.primary)
                        .lineLimit(3)
                    Text("Subtitle")
                        .font(.caption)
                        .foregroundColor(.secondary)
                
                .layoutPriority(100)

                Spacer()
                NavigationLink.init(destination: Text("Temp Link")) 
                Image(systemName:  SFSymbolName.chevron_right)
                    .foregroundColor(.secondary)
                    .font(Font.body.weight(.semibold))